danak-console/src/components/ServiceItem.tsx

import { FC } from 'react'
import { Link } from 'react-router-dom'
import { Pages } from '../config/Pages'
import { ArrowLeft, More } from 'iconsax-react'
import Button from './Button'
import { useTranslation } from 'react-i18next'
import { ItemServiceType } from '../pages/service/types/ServiecTypes'
import moment from 'moment-jalaali'
import { NumberFormat } from '../config/func'

type Props = {
    item: ItemServiceType,
    className?: string,
    isLinkPanel?: boolean,
    businessName?: string,
    isDisabled?: boolean,
    isQuikAccess?: boolean,
    onMoreClick?: () => void,
    subscriptionId?: string,
    endDate?: string,
}

const ServiceItem: FC<Props> = (props: Props) => {

    const { t } = useTranslation('global')
    const { item } = props

    const getRemainingDays = (endDate: string): number => {
        const now = moment()
        const end = moment(endDate)
        const diff = end.diff(now, 'days')
        return diff
    }

    const getRemainingDaysColor = (days: number): string => {
        if (days < 0) return 'text-red-600'
        if (days <= 7) return 'text-red-500'
        if (days <= 30) return 'text-orange-500'
        return 'text-green-600'
    }

    const getRemainingDaysText = (endDate: string): string => {
        const days = getRemainingDays(endDate)
        if (days < 0) {
            return `${NumberFormat(Math.abs(days))} روز گذشته`
        }
        if (days === 0) {
            return 'امروز آخرین روز'
        }
        if (days === 1) {
            return '۱ روز باقی مانده'
        }
        return `${NumberFormat(days)} روز باقی مانده`
    }

    return (
        <div className={`flex-1 relative flex flex-col self-stretch min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4 ${props.className} ${props.isDisabled ? 'opacity-50' : ''}`}>
            {
                props.isQuikAccess &&
                <div onClick={props.onMoreClick} className='absolute  size-6 flex justify-center items-center left-4 top-4'>
                    <More size={14} color='black' className='rotate-90' />
                </div>
            }
            <div className='flex gap-2 items-center'>
                <div className='xl:size-[50px] xl:min-w-[50px] min-w-10 size-10 overflow-hidden rounded-xl'>
                    <img src={item.icon} alt={item.name} className='w-full h-full' />
                </div>
                <div className='flex flex-col'>
                    <div className=' text-sm pl-3'>
                        {item.name}
                    </div>
                    {
                        props.isLinkPanel &&
                        <div className='text-xs text-description'>
                            {props.businessName}
                        </div>
                    }
                    {
                        props.isLinkPanel && props.endDate &&
                        <div className={`mt-1 text-[11px] ${getRemainingDaysColor(getRemainingDays(props.endDate))}`}>
                            {getRemainingDaysText(props.endDate)}
                        </div>
                    }
                </div>

            </div>

            {
                !props.isLinkPanel &&
                <div className='mt-4 text-xs'>
                    <div className='font-extralight'>{item.title} </div>
                </div>
            }


            <div className='mt-4 flex-1 flex sm:flex-row flex-col gap-2 items-end'>
                <Link className='sm:w-fit w-full' target={props.isLinkPanel && !props.isDisabled ? '_blank' : ''} to={props.isDisabled ? '#' : props.isLinkPanel ? item.link : Pages.services.detail + item.slug}>
                    <Button
                        className='h-8 sm:w-fit w-full px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                    >
                        <div className='flex gap-2 whitespace-nowrap'>
                            {
                                props.isLinkPanel ?
                                    t('panel_service')
                                    :
                                    t('service.detail')
                            }
                            <ArrowLeft color='black' size={16} />
                        </div>
                    </Button>
                </Link>

                {
                    props.subscriptionId &&
                    <Link className='sm:w-fit w-full' to={Pages.services.detail + item.slug + '?id=' + props.subscriptionId}>
                        <Button
                            className='h-8 sm:w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                        >
                            <div className='flex gap-2 whitespace-nowrap'>
                                {t('service.extend')}
                                <ArrowLeft color='black' size={16} />
                            </div>
                        </Button>
                    </Link>
                }
            </div>
        </div>
    )
}

export default ServiceItem