'use client'

import { Users, TrendingUp, Calendar, Clock } from 'lucide-react'
import { LeadStats } from '@/lib/db'

interface StatsCardsProps {
  stats: LeadStats
}

export default function StatsCards({ stats }: StatsCardsProps) {
  const cards = [
    {
      title: 'Total Leads',
      value: stats.total_leads,
      icon: Users,
      color: 'mulberry',
    },
    {
      title: 'Today',
      value: stats.leads_today,
      icon: Clock,
      color: 'ocean',
    },
    {
      title: 'This Week',
      value: stats.leads_this_week,
      icon: Calendar,
      color: 'eucalyptus',
    },
    {
      title: 'This Month',
      value: stats.leads_this_month,
      icon: TrendingUp,
      color: 'coral',
    },
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-chorus-lg mb-chorus-xxl">
      {cards.map((card, index) => {
        const Icon = card.icon
        return (
          <div
            key={card.title}
            className={`dashboard-card p-chorus-lg border-l-4 hover:shadow-xl transition-shadow duration-300 ${
              card.color === 'mulberry' ? 'border-mulberry-500' :
              card.color === 'ocean' ? 'border-ocean-500' :
              card.color === 'eucalyptus' ? 'border-eucalyptus-500' :
              'border-coral-500'
            }`}
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-carbon-600 dark:text-carbon-300 mb-1">
                  {card.title}
                </p>
                <p className="text-3xl font-bold text-carbon-900 dark:text-white">
                  {card.value.toLocaleString()}
                </p>
              </div>
              <div className={`p-chorus-md rounded-lg ${
                card.color === 'mulberry' ? 'bg-mulberry-100 dark:bg-mulberry-900' :
                card.color === 'ocean' ? 'bg-ocean-100 dark:bg-ocean-900' :
                card.color === 'eucalyptus' ? 'bg-eucalyptus-100 dark:bg-eucalyptus-900' :
                'bg-coral-100 dark:bg-coral-900'
              }`}>
                <Icon className={`h-6 w-6 ${
                  card.color === 'mulberry' ? 'text-mulberry-600 dark:text-mulberry-300' :
                  card.color === 'ocean' ? 'text-ocean-600 dark:text-ocean-300' :
                  card.color === 'eucalyptus' ? 'text-eucalyptus-600 dark:text-eucalyptus-300' :
                  'text-coral-600 dark:text-coral-300'
                }`} />
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}