import { FC, Fragment } from 'react'
import { Separator } from '@/components/ui/separator'

type SpecItem = {
    label: string
    value: string | string[]
}

const SPEC_ITEMS: SpecItem[] = [
    { label: 'ابعاد', value: 'میلی‌متر 163.3×79×8.6' },
    { label: 'وزن', value: '233 گرم' },
    { label: 'توضیحات سیم کارت', value: 'سایز نانو (12.3 × 8.8 میلی‌متر)' },
    {
        label: 'ویژگی‌های خاص',
        value: [
            'مجهز به حس‌گر اثرانگشت',
            'مقاوم در برابر آب',
            'مناسب بازی',
            'مناسب عکاسی',
            'مناسب عکاسی سلفی',
        ],
    },
    { label: 'تعداد سیم کارت', value: 'دو عدد' },
]

const Specifications: FC = () => {
    return (
        <div className="mt-16 w-full">
            <div className="flex items-center justify-end gap-3 flex-row-reverse">
                <h2 className="text-primary text-lg">مشخصات</h2>
                <div className="w-1 h-6 bg-primary rounded"></div>
            </div>

            <div className="mt-6 rounded-xl bg-white">
                {SPEC_ITEMS.map((item, index) => (
                    <Fragment key={item.label}>
                        <div className="grid grid-cols-12 items-start px-6 py-5">
                            <div className="col-span-12 md:col-span-3 flex items-center justify-end gap-2 text-[#7F7F7F] flex-row-reverse">
                                <span className="text-sm">{item.label}</span>
                                <span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
                            </div>
                            <div className="col-span-12 md:col-span-9">
                                {Array.isArray(item.value) ? (
                                    <div className="flex flex-col gap-3 text-sm text-[#333333] text-center md:text-center">
                                        {item.value.map((v) => (
                                            <div key={v}>{v}</div>
                                        ))}
                                    </div>
                                ) : (
                                    <div className="text-sm text-[#333333] text-center md:text-center">{item.value}</div>
                                )}
                            </div>
                        </div>
                        {index !== SPEC_ITEMS.length - 1 && <Separator />}
                    </Fragment>
                ))}
            </div>
        </div>
    )
}

export default Specifications