import { ArrowLeft } from 'iconsax-react'
import { FC } from 'react'

type Props = {
    isShort?: boolean
}

const ServiceItem: FC<Props> = (props) => {
    return (
        <div className='flex-1 bg-white rounded-4xl xl:p-7 p-4'>
            <div className='flex justify-between'>
                <div className='xl:size-[65px] size-[50px] rounded-2xl bg-orange-400'></div>
                <div className='h-8 bg-primary text-white px-4 rounded-2xl text-sm flex items-center'>
                    دسته بندی
                </div>
            </div>

            <h3 className='mt-6 font-bold'>
                دی منو
            </h3>

            <div className='text-xs font-light mt-1 flex justify-between'>
                <p>منو دیجیتال رستوران</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'>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم استلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
                </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>
            }
        </div>
    )
}

export default ServiceItem