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

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

const OPTIONS: { value: ViewMode; labelKey: string; Icon: typeof LayoutGrid }[] = [
  { value: "grid", labelKey: "common.viewGrid", Icon: LayoutGrid },
  { value: "table", labelKey: "common.viewTable", Icon: List },
  { value: "rows", labelKey: "common.viewRows", Icon: Rows3 },
];

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