import { FC, ReactNode } from 'react'
import { Link } from 'react-router-dom'

type Props = {
    title: string
    icon: ReactNode,
    color: string,
    count: number,
    description: string,
    to?: string
}

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

    return (
        <Link to={props.to ? props.to : ''} className='p-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
            <div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
                {props.icon}
            </div>
            <div className='mt-5'>
                {props.title}
            </div>

            <div className='mt-5 text-xs text-description flex gap-1.5 items-center'>
                <div style={{ background: props.color }} className='size-1.5 rounded-full'></div>
                <div className='flex gap-0.5'>
                    <div>{props.count}</div>
                    <div className='whitespace-nowrap'>
                        {props.description}
                    </div>
                </div>
            </div>
        </Link>
    )
}

export default ItemDashboard