import PresignedImage from '@/components/PresignedImage'
import { type ProductType } from '@/pages/request/type/Types'
import { type FC } from 'react'

const ServiceItem: FC<{ product: ProductType }> = ({ product }) => {
    return (
        <div className='flex w-[88px] shrink-0 snap-start flex-col items-center gap-2'>
            <div className='size-20 overflow-hidden rounded-full border-[3px] border-primary bg-gray-200'>
                {product.images?.[0] ? (
                    <PresignedImage
                        src={product.images[0]}
                        alt={product.title}
                        className='h-full w-full object-cover'
                    />
                ) : null}
            </div>
            <span className='line-clamp-2 w-full text-center text-xs font-light text-[#292D32]'>
                {product.title}
            </span>
        </div>
    )
}

export default ServiceItem