"use client";

/**
 * Side-by-side Biggest Gainers / Biggest Losers cards showing the
 * top movers from the summary endpoint.
 */

import { ArrowUpRight, ArrowDownRight, TrendingUp, TrendingDown } from "lucide-react";

interface Mover {
  keyword: string;
  change: number;
  position: number | null;
}

interface Props {
  improved: Mover[];
  declined: Mover[];
}

export default function MoversCards({ improved, declined }: Props) {
  if (improved.length === 0 && declined.length === 0) return null;

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="px-5 py-3.5 border-b border-slate-100 flex items-center gap-2 bg-green-50/60">
          <TrendingUp className="w-4 h-4 text-green-600" />
          <h3 className="font-bold text-slate-800 text-sm">Biggest Gainers</h3>
        </div>
        {improved.length > 0 ? (
          <div className="divide-y divide-slate-100">
            {improved.map((m) => (
              <div key={m.keyword} className="px-5 py-2.5 flex items-center gap-3">
                <span className="flex-1 text-sm font-medium text-slate-800 truncate">{m.keyword}</span>
                <span className="flex items-center gap-0.5 text-xs font-bold text-green-600">
                  <ArrowUpRight className="w-3.5 h-3.5" /> {m.change}
                </span>
                <span className="text-xs text-slate-400 tabular-nums w-8 text-right">{m.position ?? "—"}</span>
              </div>
            ))}
          </div>
        ) : (
          <div className="px-5 py-6 text-center text-xs text-slate-400">No improvements this week.</div>
        )}
      </div>

      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="px-5 py-3.5 border-b border-slate-100 flex items-center gap-2 bg-red-50/60">
          <TrendingDown className="w-4 h-4 text-red-500" />
          <h3 className="font-bold text-slate-800 text-sm">Biggest Losers</h3>
        </div>
        {declined.length > 0 ? (
          <div className="divide-y divide-slate-100">
            {declined.map((m) => (
              <div key={m.keyword} className="px-5 py-2.5 flex items-center gap-3">
                <span className="flex-1 text-sm font-medium text-slate-800 truncate">{m.keyword}</span>
                <span className="flex items-center gap-0.5 text-xs font-bold text-red-500">
                  <ArrowDownRight className="w-3.5 h-3.5" /> {Math.abs(m.change)}
                </span>
                <span className="text-xs text-slate-400 tabular-nums w-8 text-right">{m.position ?? "—"}</span>
              </div>
            ))}
          </div>
        ) : (
          <div className="px-5 py-6 text-center text-xs text-slate-400">No declines this week.</div>
        )}
      </div>
    </div>
  );
}
