import { LayoutGrid, Table2 } from "lucide-react";
import type { ViewMode } from "@/types/asset-settings";
import { PRIMARY_COLOR } from "@/lib/common";
import { cn } from "@/lib/utils";

export interface ViewModeToggleProps {
  viewMode: ViewMode;
  onViewModeChange: (mode: ViewMode) => void;
}

const VIEW_MODES: { mode: ViewMode; label: string; Icon: typeof Table2 }[] = [
  { mode: "table", label: "Table", Icon: Table2 },
  { mode: "kanban", label: "Kanban", Icon: LayoutGrid },
];

const BUTTON_BASE_CLASS =
  "px-3 py-1.5 text-xs font-medium transition-colors rounded flex items-center gap-1.5";
const BUTTON_INACTIVE_CLASS = "text-slate-700 hover:bg-slate-50";

export function ViewModeToggle({ viewMode, onViewModeChange }: ViewModeToggleProps) {
  return (
    <div className="flex rounded-lg border border-slate-300 bg-white p-1">
      {VIEW_MODES.map(({ mode, label, Icon }) => (
        <button
          key={mode}
          type="button"
          onClick={() => onViewModeChange(mode)}
          className={cn(
            BUTTON_BASE_CLASS,
            viewMode === mode ? "text-white" : BUTTON_INACTIVE_CLASS
          )}
          style={
            viewMode === mode ? { backgroundColor: PRIMARY_COLOR } : undefined
          }
        >
          <Icon className="h-3.5 w-3.5" />
          {label}
        </button>
      ))}
    </div>
  );
}