import { Tooltip, TooltipContent, TooltipTrigger } from '@thedaviddias/design-system/tooltip'
import type { LucideIcon } from 'lucide-react'
import { Card } from '@/components/ui/card'

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

/**
 * Renders a statistics card with icon, title, value, and optional tooltip
 */
export function StatCard({ title, value, icon: Icon, description }: StatCardProps) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Card className="p-6 text-center transition-all duration-200 hover:border-primary hover:scale-105 hover:shadow-lg cursor-help">
          <Icon className="h-8 w-8 mx-auto mb-2 text-primary" />
          <h3 className="text-lg font-semibold">{title}</h3>
          <p className="text-3xl font-bold">{value}</p>
        </Card>
      </TooltipTrigger>
      {description && (
        <TooltipContent>
          <p>{description}</p>
        </TooltipContent>
      )}
    </Tooltip>
  )
}