"use client";

import { Icon } from "@/components/ui/Icon";
import type { ViewMode } from "@/lib/ui/viewMode";

/** Umschalter zwischen Kachel- und Listenansicht. */
export function ViewSwitch({
  value,
  onChange,
}: {
  value: ViewMode;
  onChange: (v: ViewMode) => void;
}) {
  return (
    <div className="segmented" role="group" aria-label="Ansicht">
      <button
        type="button"
        className="segmented-btn"
        style={{ padding: "6px 11px" }}
        data-active={value === "grid"}
        onClick={() => onChange("grid")}
        title="Kachelansicht"
        aria-pressed={value === "grid"}
      >
        <Icon name="grid" size={15} />
        <span className="hidden sm:inline">Kacheln</span>
      </button>
      <button
        type="button"
        className="segmented-btn"
        style={{ padding: "6px 11px" }}
        data-active={value === "list"}
        onClick={() => onChange("list")}
        title="Listenansicht"
        aria-pressed={value === "list"}
      >
        <Icon name="list" size={15} />
        <span className="hidden sm:inline">Liste</span>
      </button>
    </div>
  );
}