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

const PROS: string[] = [
    'مجهز به حس‌گر اثرانگشت',
    'مقاوم در برابر آب',
    'مناسب بازی',
    'مناسب عکاسی',
    'مناسب عکاسی سلفی',
]

const CONS: string[] = [
    'وزن نسبتاً بالا',
    'عدم وجود شارژر در جعبه',
]

const ProsCons: 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">
                <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">نقاط مثبت</span>
                        <span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
                    </div>
                    <div className="col-span-12 md:col-span-9">
                        <div className="flex flex-col gap-3 text-sm text-[#333333] text-center md:text-center">
                            {PROS.map((v) => (
                                <div key={v}>{v}</div>
                            ))}
                        </div>
                    </div>
                </div>

                <Separator />

                <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">نقاط منفی</span>
                        <span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
                    </div>
                    <div className="col-span-12 md:col-span-9">
                        <div className="flex flex-col gap-3 text-sm text-[#333333] text-center md:text-center">
                            {CONS.map((v) => (
                                <div key={v}>{v}</div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ProsCons


