import Badge from '@/components/Badge';
import Card from '@/components/Card';
import { Icon } from '@iconify/react';
import { formatNumber } from '@/lib/helper';

const UniformityStat = () => {
  const statisticsData = [
    {
      title: 'Total Population',
      value: 1908978,
      icon: 'heroicons-outline:inbox-stack',
      change: '15.5%',
      changeType: 'increase',
    },
    {
      title: 'Total Uniformity',
      value: 954489,
      icon: 'heroicons-outline:scale',
      change: '50%',
      changeType: 'decrease',
    },
    {
      title: 'Total Depletion',
      value: 954489,
      icon: 'heroicons-outline:inbox-stack',
      change: '15.5%',
      changeType: 'increase',
    },
    {
      title: 'Total Production',
      value: 2534,
      icon: 'heroicons-outline:inbox-stack',
      change: '15.5%',
      changeType: 'increase',
    },
  ];

  return (
    <section className='grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4'>
      {statisticsData.map((stat, index) => (
        <Card
          key={index}
          variant='bordered'
          size='sm'
          className={{
            wrapper: 'w-full',
            footer: 'bg-[#F8F8F8]',
          }}
          footer={
            <>
              <section className='flex items-center justify-between'>
                <span className='font-normal text-gray-500'>
                  From last month
                </span>
                <Badge
                  color={stat.changeType === 'increase' ? 'success' : 'error'}
                  variant='soft'
                  className={{ badge: 'rounded-2xl' }}
                >
                  <Icon
                    icon={
                      stat.changeType === 'increase'
                        ? 'heroicons-outline:arrow-trending-up'
                        : 'heroicons-outline:arrow-trending-down'
                    }
                    width={16}
                    height={16}
                    className='inline-block'
                  />
                  {stat.change}
                </Badge>
              </section>
            </>
          }
        >
          <div className='flex gap-2 items-center'>
            <div className='p-2 border rounded-xl border-gray-300 shrink-0'>
              <Icon icon={stat.icon} width={32} height={32} />
            </div>
            <div className='grid grid-cols-1 min-w-0'>
              <span className='truncate'>{stat.title}</span>
              <span className='text-xl font-semibold break-all'>
                {formatNumber(stat.value)}
              </span>
            </div>
          </div>
        </Card>
      ))}
    </section>
  );
};

export default UniformityStat;
