import { type FC, type ReactNode } from 'react'
import { clx } from '../helpers/utils'
import { Swiper, SwiperSlide } from 'swiper/react'

type Item = {
    icon: ReactNode,
    label: string,
    value: string,
}

type Props = {
    items: Item[],
    onChange: (value: string) => void,
    active: string,
}

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

    const SWIPER_SLIDE_STYLE = {
        overflow: 'visible !important',
        display: 'flex',
    }

    return (
        <Swiper
            slidesPerView='auto'
            spaceBetween={30}
            className='px-10 max-w-full w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white/45'>
            {
                props.items.map((item: Item, index: number) => {
                    return (
                        <SwiperSlide style={SWIPER_SLIDE_STYLE} onClick={() => props.onChange(item.value)} key={item.value} className={clx(
                            'flex flex-col max-w-fit mt-[15px] items-center gap-2 cursor-pointer',
                            index === 0 && 'pr-[30px]',
                            // index === props.items.length - 1 && 'pl-[30px]',
                            props.active === item.value && 'text-black'
                        )}>
                            {item.icon}
                            <div className='text-xs'>
                                {item.label}
                            </div>
                        </SwiperSlide>
                    )
                })
            }
        </Swiper>
    )
}

export default Tabs