'use client';

import { BarChart, CreditCard, Download, FileText } from 'lucide-react';

import { Button } from '@/shared/shadcn-ui/button';
import { Card, CardContent } from '@/shared/shadcn-ui/card';

interface CardsListProps {
  totalCards: number;
}

export const CardsList = ({ totalCards }: CardsListProps) => {
  return (
    <div className='mb-10'>
      <div className='mb-4 flex items-center justify-between'>
        <h2 className='text-2xl font-bold'>Топливные карты</h2>
        <div className='flex gap-2'>
          <Button variant='outline' className='gap-2'>
            <Download className='h-4 w-4' />
            Экспорт данных
          </Button>
          <Button variant='outline' className='gap-2'>
            <FileText className='h-4 w-4' />
            Отчеты
          </Button>
          <Button variant='outline' className='gap-2'>
            <BarChart className='h-4 w-4' />
            Аналитика
          </Button>
        </div>
      </div>
      <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
        {Array.from({ length: 4 }).map((_, index) => (
          <Card key={index} className='overflow-hidden'>
            <CardContent className='p-0'>
              <div className='bg-gradient-to-r from-gray-800 to-gray-900 p-4 text-white'>
                <div className='flex items-start justify-between'>
                  <div>
                    <p className='mb-1 text-xs text-gray-300'>
                      Карта #{index + 1}
                    </p>
                    <p className='font-medium'>**** **** **** {1000 + index}</p>
                  </div>
                  <CreditCard className='h-6 w-6 text-gray-300' />
                </div>
              </div>
              <div className='p-4'>
                <div className='mb-2 flex items-center justify-between'>
                  <p className='text-sm text-gray-500'>Лимит:</p>
                  <p className='font-medium'>
                    {(5000 * (index + 1)).toLocaleString()} сомони
                  </p>
                </div>
                <div className='flex items-center justify-between'>
                  <p className='text-sm text-gray-500'>Статус:</p>
                  <span className='inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800'>
                    Активна
                  </span>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
        {/* Show more cards button */}
        {totalCards > 4 && (
          <Button
            variant='outline'
            className='h-full min-h-[120px] border-dashed'
          >
            Показать все карты ({totalCards})
          </Button>
        )}
      </div>
    </div>
  );
};