"use client";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import { LayoutGrid, List, Rows3, Table2 } from "lucide-react";
import { t, type Locale } from "@/lib/i18n";
const MODES = ["list", "compact", "cards", "table"] as const;
export type DisplayMode = (typeof MODES)[number];
/** Display preference is remembered in localStorage and applied through the `view` query parameter. */
export function DisplayToggle({ locale, current }: { locale: Locale; current: DisplayMode }) {
  const d = t(locale); const router = useRouter(); const sp = useSearchParams();
  useEffect(() => { try { const saved = localStorage.getItem("papers.view") as DisplayMode | null; if (saved && MODES.includes(saved) && !sp.get("view") && saved !== "list") { const q = new URLSearchParams(sp.toString()); q.set("view", saved); router.replace(`?${q.toString()}`); } } catch {} }, [router, sp]);
  const set = (m: DisplayMode) => { try { localStorage.setItem("papers.view", m); } catch {} const q = new URLSearchParams(sp.toString()); q.set("view", m); router.push(`?${q.toString()}`); };
  const icons = { list: List, compact: Rows3, cards: LayoutGrid, table: Table2 }; const labels = { list: d.papers.list, compact: d.papers.compact, cards: d.papers.cards, table: d.papers.table };
  return (
    <div role="group" aria-label={d.papers.display} className="inline-flex rounded-lg border border-line-2 overflow-hidden">
      {MODES.map((m) => { const I = icons[m]; return <button key={m} type="button" aria-pressed={current === m} title={labels[m]} aria-label={labels[m]} onClick={() => set(m)} className={`px-2.5 py-1.5 text-sm ${current === m ? "bg-navy text-accent-fg" : "bg-bg-2 text-fg-2 hover:bg-bg-3"}`}><I size={16} aria-hidden /></button>; })}
    </div>
  );
}