import { clx } from '@/helpers/utils'
import { type FC } from 'react'

type TabItem = {
    label: string
    value: string
}

type Props = {
    items: TabItem[]
    activeTab: string
    onTabChange: (tab: string) => void
}

const Tabs: FC<Props> = (props) => {

    const { items, activeTab, onTabChange } = props


    return (
        <div className='flex justify-center text-sm'>
            <div className='flex gap-4 h-[52px] rounded-full bg-white px-4 items-center'>
                {
                    items.map((item) => {
                        return (
                            <div onClick={() => onTabChange(item.value)} key={item.value} className={clx(
                                'h-[32px] flex items-center justify-center w-[122px] cursor-pointer rounded-full',
                                activeTab === item.value && 'bg-primary'
                            )}>
                                {item.label}
                            </div>
                        )
                    })
                }
            </div>

        </div>
    )
}

export default Tabs