"use client";

import { useRouter } from "next/navigation";

interface TemplateOption {
  id: string;
  name: string;
}

const selectClass =
  "rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-2 py-1 font-mono text-xs text-zinc-800 dark:text-zinc-100 focus:border-cyan-500 focus:outline-none";

export function TemplateCompareSelects({
  templates,
  leftId,
  rightId,
  onlyDiffs,
}: {
  templates: TemplateOption[];
  leftId: string;
  rightId: string;
  onlyDiffs: boolean;
}) {
  const router = useRouter();

  const push = (left: string, right: string) => {
    const params = new URLSearchParams({ mode: "compare", left, right });
    if (onlyDiffs) params.set("diffs", "1");
    router.push(`/templates?${params.toString()}`);
  };

  return (
    <div className="mb-4 flex flex-wrap items-center gap-4">
      <div className="flex items-center gap-2">
        <span className="font-mono text-xs text-zinc-500">Gauche :</span>
        <select value={leftId} onChange={(e) => push(e.target.value, rightId)} className={selectClass}>
          {templates.map((t) => (
            <option key={t.id} value={t.id}>{t.name}</option>
          ))}
        </select>
      </div>
      <div className="flex items-center gap-2">
        <span className="font-mono text-xs text-zinc-500">Droite :</span>
        <select value={rightId} onChange={(e) => push(leftId, e.target.value)} className={selectClass}>
          {templates.map((t) => (
            <option key={t.id} value={t.id}>{t.name}</option>
          ))}
        </select>
      </div>
    </div>
  );
}
