import type { LucideIcon } from 'lucide-react'
import { toneClasses, type Tone } from '../lib/tones'

interface MetricCardProps {
  label: string
  value: string
  delta?: string
  icon: LucideIcon
  tone: Tone
}

export function MetricCard({ label, value, delta, icon: Icon, tone }: MetricCardProps) {
  return (
    <div className="rounded-lg border border-line bg-white p-[13px] sm:p-[18px]">
      <div className={`grid size-[35px] place-items-center rounded-[7px] ${toneClasses[tone]}`}>
        <Icon size={19} />
      </div>
      <span className="mt-2.5 mb-1.5 block text-xs text-muted sm:mt-[15px]">{label}</span>
      <strong className="block font-display text-[25px] font-semibold tracking-[-1px] text-ink sm:text-[30px]">{value}</strong>
      {delta && <small className="mt-[9px] block text-[9px] text-[#7d8b86] sm:text-2xs">{delta}</small>}
    </div>
  )
}