import { Buildings, Users, Lightning, TrendUp } from '@/lib/icons';

import type { DashboardStats } from "@/lib/appwrite/dashboard-queries";

export function SectionCards({ stats }: { stats: DashboardStats }) {
  const items = [
    {
      label: "Aktif İlan",
      value: stats.aktifIlanlar,
      icon: Buildings,
      sub: [
        `${stats.satilikAktif} sat`,
        `${stats.kiralikAktif} kir`,
        ...(stats.rezerveIlanlar > 0 ? [`${stats.rezerveIlanlar} rsv`] : []),
      ].join(" · "),
    },
    {
      label: "Müşteri",
      value: stats.toplamMusteri,
      icon: Users,
      sub: `${stats.aliciMusteri} alıcı · ${stats.kiraciMusteri} kiracı · ${stats.yatirimciMusteri} yat`,
    },
    {
      label: "Bekleyen Eşleşme",
      value: stats.bekleyenEslesmeler,
      icon: Lightning,
      sub: "iletilmemiş bildirim",
      accent: stats.bekleyenEslesmeler > 0,
    },
    {
      label: "Bu Ay Eklenen",
      value: stats.buAyIlanlar,
      icon: TrendUp,
      sub: "yeni ilan",
    },
  ];

  return (
    <div className="grid grid-cols-2 sm:grid-cols-4 gap-px rounded-xl border bg-border overflow-hidden">
      {items.map((item) => (
        <div key={item.label} className="bg-card px-4 py-3.5 flex items-center gap-3">
          <div className={`size-9 rounded-lg flex items-center justify-center shrink-0 ${
            item.accent
              ? "bg-amber-100 dark:bg-amber-950/40"
              : "bg-muted"
          }`}>
            <item.icon className={`size-4 ${item.accent ? "text-amber-600 dark:text-amber-400" : "text-foreground/60"}`} />
          </div>
          <div className="min-w-0">
            <p className="text-2xl font-bold tabular-nums leading-none">{item.value}</p>
            <p className="text-xs font-medium text-muted-foreground mt-1 leading-none">{item.label}</p>
            <p className="text-[10px] text-muted-foreground/60 mt-0.5 truncate">{item.sub}</p>
          </div>
        </div>
      ))}
    </div>
  );
}
