import { Card, CardContent } from "@/components/ui/card"
import type { LucideIcon } from "lucide-react"

interface StatsCardProps {
  title: string
  value: string | number
  icon: LucideIcon
  color?: string
  description?: string
}

export default function StatsCard({
  title,
  value,
  icon: Icon,
  color = "var(--main-color)",
  description,
}: StatsCardProps) {
  return (
    <Card className="border-[var(--border-color)] hover:shadow-md transition-shadow">
      <CardContent className="p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-[var(--parg-color)] mb-1">{title}</p>
            <p className="text-2xl font-bold text-[var(--dark-color)]">{value}</p>
            {description && <p className="text-xs text-[var(--p-color)] mt-1">{description}</p>}
          </div>
          <div
            className="w-12 h-12 rounded-full flex items-center justify-center"
            style={{ backgroundColor: `${color}20` }}
          >
            <Icon className="w-6 h-6" style={{ color }} />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}