'use client'

import React, { useState } from 'react'
import CaseStudyItem from './CaseStudyItem'
import { CaseStudyType } from '@/type/CaseStudyType'
import { motion } from 'framer-motion'

interface Props {
    data: Array<CaseStudyType>
}

const CaseStudyTwo: React.FC<Props> = ({ data }) => {
    const [activeTab, setActiveTab] = useState<string>('fintech')

    const handleTabClick = (item: string) => {
        setActiveTab(item)
    }

    return (
        <>
            <div className="case-studies-block lg:py-[100px] sm:py-16 py-10">
                <div className="container flex flex-col items-center">
                    <div className="heading flex flex-col items-center text-center">
                        <div className="menu-tab flex items-center gap-2 p-1 bg-surface rounded-2xl">
                            {['all', 'investing', 'fintech', 'crypto', 'blockchain', 'planning'].map((item, index) => (
                                <div
                                    key={index}
                                    className={`tab-item relative text-secondary text-button-sm py-2 px-5 cursor-pointer duration-500 hover:text-black ${activeTab === item ? 'active' : ''}`}
                                    onClick={() => handleTabClick(item)}
                                >
                                    {activeTab === item && (
                                        <motion.div layoutId='active-pill' className='absolute inset-0 rounded-2xl bg-white'></motion.div>
                                    )}
                                    <span className='relative text-button-sm white-space-nowrap capitalize z-[1] active:text-black'>
                                        {item}
                                    </span>
                                </div>
                            ))}
                        </div>
                    </div>
                    <div className="list-case-studies grid xl:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 gap-8 gap-y-10 md:mt-10 mt-6">
                        {data.filter(item => activeTab === 'all' ? true : item.category === activeTab).map((item, index) => (
                            <CaseStudyItem data={item} style='style-two' key={index} />
                        ))}
                    </div>
                </div>
            </div>
        </>
    )
}

export default CaseStudyTwo