'use client'
import { FC, Fragment } from 'react'
import { Separator } from '@/components/ui/separator'
import { Product } from '@/types/product.types'

interface SpecificationsProps {
    product: Product
}

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

            <div className="mt-4 sm:mt-6 rounded-xl bg-white">
                {product.specifications.map((spec, index) => (
                    <Fragment key={spec.title}>
                        <div className="grid grid-cols-12 items-start px-4 sm:px-6 py-4 sm: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-xs sm:text-sm">{spec.title}</span>
                                <span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
                            </div>
                            <div className="col-span-12 md:col-span-9 mt-2 md:mt-0">
                                <div className="flex flex-col gap-2 sm:gap-3 text-xs sm:text-sm text-[#333333] text-right">
                                    {spec.values.map((value, valueIndex) => (
                                        <div key={valueIndex}>{value}</div>
                                    ))}
                                </div>
                            </div>
                        </div>
                        {index !== product.specifications.length - 1 && <Separator />}
                    </Fragment>
                ))}
            </div>
        </div>
    )
}

export default Specifications


