"use client";

import { LayoutList, Rows3 } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useBoardView, type BoardView } from "@/components/board/board-view-provider";

// New views just need one more entry here (and one more BoardView literal)
// -- no redesign of the trigger or menu required.
const OPTIONS: { value: BoardView; label: string; icon: typeof LayoutList }[] = [
  { value: "default", label: "Default", icon: LayoutList },
  { value: "compact", label: "Compact", icon: Rows3 },
];

export function ViewSwitcher() {
  const { view, setView } = useBoardView();
  const current = OPTIONS.find((o) => o.value === view) ?? OPTIONS[0];
  const Icon = current.icon;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <Button variant="ghost" size="sm" className="gap-2 text-muted-foreground">
            <Icon className="size-4" />
            {current.label}
          </Button>
        }
      />
      <DropdownMenuContent align="end">
        <DropdownMenuRadioGroup value={view} onValueChange={(v) => setView(v as BoardView)}>
          {OPTIONS.map((option) => (
            <DropdownMenuRadioItem key={option.value} value={option.value}>
              <option.icon className="size-4" />
              {option.label}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}