import Link from 'next/link'

export function StatCard({
  title,
  value,
  description,
  href,
  color,
}: {
  title: string
  value: number
  description: string
  href: string
  color: 'blue' | 'purple' | 'green' | 'red'
}) {
  const colors = {
    blue: 'bg-blue-50 dark:bg-blue-900/20',
    purple: 'bg-purple-50 dark:bg-purple-900/20',
    green: 'bg-green-50 dark:bg-green-900/20',
    red: 'bg-red-50 dark:bg-red-900/20',
  }

  return (
    <Link href={href} className={`${colors[color]} rounded-lg p-6 hover:opacity-80 transition-opacity`}>
      <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
      <p className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{value}</p>
      <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
    </Link>
  )
}