import { History, RotateCcw } from 'lucide-react';
import StatusPill from '@/components/workshop/StatusPill';

export default function DesignHistory({ revisions, currentUuid, onRestore, busy }) {
  if (!revisions || revisions.length === 0) return null;
  return (
    <section className="panel p-5">
      <h2 className="section-title flex items-center gap-2"><History className="h-4 w-4" />Design Revisions ({revisions.length})</h2>
      <ol className="space-y-2">
        {revisions.map((r) => (
          <li key={r.uuid} className="flex items-center justify-between rounded-lg border border-white/10 px-3 py-2 text-sm">
            <div className="flex items-center gap-2">
              <span className="font-medium text-violet-300">v{r.version}</span>
              <span className="text-xs text-slate-500">{r.design_category} · {r.main_colour}</span>
              {r.uuid === currentUuid && <StatusPill tone="green">Current</StatusPill>}
              {r.approved_for_quote && <StatusPill tone="cyan">Approved</StatusPill>}
            </div>
            <div className="flex items-center gap-2">
              <span className="text-xs text-slate-600">{r.updated_date || r.created_date}</span>
              {r.uuid !== currentUuid && <button disabled={busy} onClick={() => onRestore(r.uuid)} className="btn-secondary !py-1 text-xs"><RotateCcw />Restore</button>}
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}