import { DanakSuggestService } from '@/app/home/types/HomeTypes'
import { ArrowLeft } from 'iconsax-react'
import Image from 'next/image'
import Link from 'next/link'
import { FC } from 'react'

type Props = {
    isShort?: boolean
    item: DanakSuggestService
}

const ServiceItem: FC<Props> = (props) => {
    return (
        <Link href={`/products/${props.item.id}`} className='flex-1 bg-white rounded-4xl xl:p-7 p-4 flex flex-col'>
            <div className='flex justify-between'>
                <div className='xl:size-[65px] size-[50px] rounded-2xl overflow-hidden'>
                    <Image src={props.item.icon} className='size-full object-cover' alt={props.item.name} width={65} height={65} />
                </div>
                <div className='h-8 bg-primary text-white px-4 rounded-2xl text-sm flex items-center'>
                    {props.item.category?.title}
                </div>
            </div>

            <h3 className='mt-6 font-bold'>
                {props.item?.name}
            </h3>

            <div className='text-xs font-light mt-1 flex justify-between'>
                <p>{props.item.title}</p>
                {
                    props.isShort &&
                    <div className='flex'>
                        <div className='flex gap-1.5 items-center'>
                            <div className='text-sm'>جزییات</div>
                            <ArrowLeft size={20} color='black' />
                        </div>
                    </div>
                }
            </div>

            {
                !props.isShort &&
                <p className='mt-6 text-sm leading-7'>
                    {props.item.description}
                </p>
            }

            {
                !props.isShort &&
                <div className='flex justify-end mt-6'>
                    <div className='flex gap-1.5 items-center'>
                        <div className='text-sm'>جزییات</div>
                        <ArrowLeft size={20} color='black' />
                    </div>
                </div>
            }
        </Link>
    )
}

export default ServiceItem