import { useI18n } from "../../providers/i18n-provider";
import { TrendingUpIcon, TrendingDownIcon } from "./icons";

export function KpiCard(props: { kpi: any; index: number }) {
  const i18n = useI18n();
  const trend = () => props.kpi.trend ?? "neutral";
  const trendClass = () => {
    switch (trend()) {
      case "up": return "bg-accent/10 text-accent";
      case "down": return "bg-red-500/10 text-red-500";
      default: return "bg-canvas-muted text-ink-muted";
    }
  };

  const TrendIcon = () => {
    switch (trend()) {
      case "up": return <TrendingUpIcon />;
      case "down": return <TrendingDownIcon />;
      default: return <span class="text-xs">\u2014</span>;
    }
  };

  return (
    <div
      class="surface-card p-5 hover:shadow-md transition-shadow animate-fade-in"
      style={{ "animation-delay": `${props.index * 100}ms` }}
    >
      <div class="flex items-center justify-between mb-3">
        <p class="text-sm text-ink-muted">{props.kpi.label}</p>
        <span class={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${trendClass()}`}>
          <TrendIcon /> {props.kpi.change}
        </span>
      </div>
      <p class="text-3xl font-bold text-ink font-display">{props.kpi.value}</p>
    </div>
  );
}
