"use client";

import { Award, BriefcaseBusiness, Layers, Package } from "lucide-react";
import { Card } from "@/components/ui/card";
import { CategoryStats } from "@/types/category";

interface CategoryStatsCardsProps {
  stats: CategoryStats;
}

export function CategoryStatsCards({ stats }: CategoryStatsCardsProps) {
  const cards = [
    {
      title: "Total de Categorias",
      value: stats.totalCategories,
      subtext: "Categorias ativas no sistema",
      icon: Layers,
      iconBg: "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400",
    },
    {
      title: "Ativos Categorizados",
      value: stats.totalEquipment,
      subtext: "Máquinas e equipamentos organizados",
      icon: Package,
      iconBg: "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400",
    },
    {
      title: "Categoria Principal",
      value: stats.topCategory ? stats.topCategory.name : "Nenhuma",
      subtext: stats.topCategory
        ? `${stats.topCategory.count} equipamentos cadastrados`
        : "Sem dados suficientes",
      icon: Award,
      iconBg: "bg-purple-500/10 text-purple-600 dark:bg-purple-500/20 dark:text-purple-400",
    },
    {
      title: "Média por Categoria",
      value:
        stats.totalCategories > 0
          ? `${(stats.totalEquipment / stats.totalCategories).toFixed(1)} ativos`
          : "0",
      subtext: "Distribuição média por grupo",
      icon: BriefcaseBusiness,
      iconBg: "bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400",
    },
  ];

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {cards.map((card) => {
        const Icon = card.icon;
        return (
          <Card key={card.title} className="p-4 shadow-xs border">
            <div className="flex items-start justify-between">
              <div>
                <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                  {card.title}
                </p>
                <h3 className="mt-2 text-2xl font-bold tracking-tight">
                  {card.value}
                </h3>
              </div>
              <div className={`rounded-xl p-2.5 ${card.iconBg}`}>
                <Icon className="h-5 w-5" />
              </div>
            </div>
            <p className="mt-3 text-xs text-muted-foreground">{card.subtext}</p>
          </Card>
        );
      })}
    </div>
  );
}