import { Leaf, Package, Tractor, Ticket, Truck } from "lucide-react";
import type { AppLocale } from "@/lib/i18n/config";
import { td } from "@/lib/i18n/dashboard-labels";
import { KpiCard } from "@/components/ui/kpi-card";
import type { InputsViewModel } from "@/lib/farmer-dashboard";

type InputsKpis = NonNullable<InputsViewModel["kpis"]>;

interface InputsKpiRowProps {
  kpis: InputsKpis;
  locale: AppLocale;
}

export function InputsKpiRow({ kpis, locale }: InputsKpiRowProps) {
  const items = [
    {
      key: "seed",
      label: td("inputsKpiSeed", locale),
      hint: td("inputsKpiProductsAvailable", locale),
      value: kpis.seed,
      icon: <Leaf className="size-5" />,
      accent: "default" as const,
    },
    {
      key: "fertiliser",
      label: td("inputsKpiFertiliser", locale),
      hint: td("inputsKpiProductsAvailable", locale),
      value: kpis.fertiliser,
      icon: <Package className="size-5" />,
      accent: "default" as const,
    },
    {
      key: "equipment",
      label: td("inputsKpiEquipment", locale),
      hint: td("inputsKpiEquipmentAvailable", locale),
      value: kpis.equipment,
      icon: <Tractor className="size-5" />,
      accent: "warning" as const,
    },
    {
      key: "vouchers",
      label: td("inputsKpiVouchers", locale),
      hint: td("inputsKpiActiveVouchers", locale),
      value: kpis.vouchers,
      icon: <Ticket className="size-5" />,
      accent: "success" as const,
    },
    {
      key: "inTransit",
      label: td("inputsKpiDelivery", locale),
      hint: td("inputsKpiInTransit", locale),
      value: kpis.inTransit,
      icon: <Truck className="size-5" />,
      accent: "default" as const,
    },
  ];

  return (
    <div
      data-testid="inputs-kpi-row"
      className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-5"
    >
      {items.map((item) => (
        <KpiCard
          key={item.key}
          data-testid={`inputs-kpi-${item.key}`}
          label={item.label}
          value={item.value}
          hint={item.hint}
          icon={item.icon}
          accent={item.accent}
          compact
        />
      ))}
    </div>
  );
}