import { cn } from '@/lib/utils'
import { Card, CardContent } from './Card'
import { LucideIcon } from 'lucide-react'

interface KpiCardProps {
  title: string
  value: string | number
  icon: LucideIcon
  trend?: string
  trendUp?: boolean
  className?: string
}

export function KpiCard({ title, value, icon: Icon, trend, trendUp, className }: KpiCardProps) {
  return (
    <Card className={cn('overflow-hidden transition-shadow hover:shadow-md', className)}>
      <CardContent className="p-6">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-sm font-medium text-gray-500 dark:text-gray-400">{title}</p>
            <p className="mt-1 text-3xl font-bold text-gray-900 dark:text-white">{value}</p>
            {trend && (
              <p className={cn('mt-1 text-sm flex items-center gap-1', trendUp ? 'text-emerald-600' : 'text-red-600')}>
                {trendUp ? '↑' : '↓'} {trend}
              </p>
            )}
          </div>
          <div className="p-3 bg-indigo-100 rounded-xl text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400">
            <Icon className="h-6 w-6" aria-hidden="true" />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}