import { LayoutGrid, List, Rows3 } from "lucide-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export type ViewMode = "grid" | "table" | "rows";

const OPTIONS: { value: ViewMode; label: string; Icon: typeof LayoutGrid }[] = [
  { value: "grid", label: "Grid", Icon: LayoutGrid },
  { value: "table", label: "Table", Icon: List },
  { value: "rows", label: "Rows", Icon: Rows3 },
];

export function ViewToggle({
  value,
  onValueChange,
}: {
  value: ViewMode;
  onValueChange: (v: ViewMode) => void;
}) {
  return (
    <ToggleGroup
      type="single"
      value={value}
      onValueChange={(v) => {
        if (v) onValueChange(v as ViewMode);
      }}
      variant="outline"
      size="sm"
      aria-label="View mode"
    >
      {OPTIONS.map(({ value: v, label, Icon }) => (
        <ToggleGroupItem key={v} value={v} aria-label={label} title={label} data-testid={`view-${v}`}>
          <Icon className="w-4 h-4" />
        </ToggleGroupItem>
      ))}
    </ToggleGroup>
  );
}