"use client";

import { Link2, Globe, TrendingUp, TrendingDown, ShieldAlert, BarChart3 } from "lucide-react";

interface Summary {
  total: number; totalDomains: number; newThisMonth: number;
  lostThisMonth: number; avgDomainAuthority: number; toxicCount: number;
}

export default function OverviewCards({ data }: { data: Summary }) {
  const cards = [
    { label: "Total Backlinks", value: data.total.toLocaleString(), icon: Link2, color: "text-slate-900" },
    { label: "Referring Domains", value: data.totalDomains.toLocaleString(), icon: Globe, color: "text-slate-900" },
    { label: "New This Month", value: `+${data.newThisMonth}`, icon: TrendingUp, color: data.newThisMonth > 0 ? "text-green-600" : "text-slate-400" },
    { label: "Lost This Month", value: `-${data.lostThisMonth}`, icon: TrendingDown, color: data.lostThisMonth > 0 ? "text-red-600" : "text-slate-400" },
    { label: "Avg Domain Authority", value: data.avgDomainAuthority.toFixed(1), icon: BarChart3, color: "text-teal-600" },
    { label: "Toxic Links", value: String(data.toxicCount), icon: ShieldAlert, color: data.toxicCount > 0 ? "text-red-600" : "text-green-600" },
  ];

  return (
    <div className="grid grid-cols-3 lg:grid-cols-6 gap-3">
      {cards.map((c) => (
        <div key={c.label} className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="flex items-center gap-2 mb-2">
            <c.icon className="w-4 h-4 text-slate-400" />
            <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{c.label}</span>
          </div>
          <p className={`text-xl font-bold ${c.color}`}>{c.value}</p>
        </div>
      ))}
    </div>
  );
}
