import Link from "next/link";
import { DashboardCard } from "@/types/dashboard";

interface DashboardCardsProps {
  cards: DashboardCard[];
}

export function DashboardCards({ cards }: DashboardCardsProps) {
  return (
    <div className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-1.5 sm:grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 sm:overflow-visible sm:pb-0">
      {cards.map((card, index) => {
        const Icon = card.icon;
        const toneClass =
          card.tone === "positive"
            ? "text-emerald-600"
            : card.tone === "negative"
            ? "text-rose-600"
            : "text-slate-500";

        return (
          <div
            key={card.key}
            className={`group relative flex min-w-[240px] snap-center flex-col overflow-hidden rounded-lg border border-white/70 bg-white/95 px-5 py-5 shadow-lg ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:scale-[1.02] hover:shadow-xl animate-[fadeIn_0.5s_ease-in-out,slideUp_0.5s_ease-in-out] ${card.accent.hover}`}
            style={{
              animationDelay: `${index * 100}ms`,
              animationFillMode: "both",
            }}
          >
            <div
              className={`absolute -right-20 -top-20 h-32 w-32 rounded-lg ${card.accent.halo} blur-3xl`}
            />
            <div
              className={`absolute -bottom-24 -left-16 h-36 w-36 rounded-lg ${card.accent.glow} blur-3xl`}
            />

            <div className="relative z-10 flex items-start justify-between">
              <div className="space-y-1">
                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                  {card.title}
                </p>
                <div className="flex items-baseline gap-2">
                  <h3 className="text-2xl font-semibold text-slate-900">
                    {card.metric}
                  </h3>
                  <span className="text-xs font-semibold uppercase tracking-wide text-slate-400">
                    {card.currency}
                  </span>
                </div>
              </div>
              <span
                className={`inline-flex h-10 w-10 items-center justify-center rounded-lg border border-white/60 shadow-sm ${card.accent.icon}`}
              >
                <Icon className="h-5 w-5" />
              </span>
            </div>

            <p className="relative z-10 mt-2.5 text-xs text-slate-500">
              {card.description}
            </p>
            <p className={`relative z-10 mt-1.5 text-xs font-medium ${toneClass}`}>
              {card.delta}
            </p>

            <div className="relative z-10 mt-4 space-y-1.5 text-sm">
              {card.breakdown.map((item) => (
                <div
                  key={item.label}
                  className="flex items-center justify-between text-slate-500"
                >
                  <span className="text-xs font-medium uppercase tracking-[0.2em] text-slate-400">
                    {item.label}
                  </span>
                  <span className="text-sm font-semibold text-slate-900">
                    {item.value}
                  </span>
                </div>
              ))}
            </div>

            <Link
              href={card.href}
              className="relative z-10 mt-auto inline-flex items-center gap-1 pt-5 text-xs font-semibold uppercase tracking-[0.2em] text-slate-900"
            >
              View
              <span aria-hidden="true">→</span>
            </Link>
          </div>
        );
      })}
    </div>
  );
}