"use client";

import { Zap } from "lucide-react";
import type { SeoQuickWin } from "@/lib/audit/types";

interface Props {
  wins: SeoQuickWin[];
}

export function QuickWinsGrid({ wins }: Props) {
  if (!wins || wins.length === 0) return null;

  return (
    <div id="audit-quick-wins" className="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl border border-amber-200 p-6 sm:p-8">
      <div className="flex items-center gap-2 mb-5">
        <Zap className="w-4 h-4 text-amber-600" />
        <h2 className="text-[11px] font-semibold uppercase tracking-widest text-amber-700">Quick Wins</h2>
        <span className="text-[11px] text-amber-600/60 font-medium">— implement today</span>
      </div>
      <div className="grid sm:grid-cols-2 gap-3">
        {wins.map((w, i) => (
          <div
            key={i}
            className="flex items-center justify-between gap-3 bg-white/60 backdrop-blur-sm border border-amber-100 rounded-xl px-4 py-3.5"
          >
            <span className="text-[15px] text-amber-900 leading-snug">{w.title}</span>
            <span className="text-xs text-amber-700 shrink-0 font-semibold bg-amber-100 px-2.5 py-1 rounded-full whitespace-nowrap">
              {w.estimatedTime}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}
