"use client";

interface ViewToggleProps {
  view: "grid" | "list";
  onChange: (view: "grid" | "list") => void;
}

export default function ViewToggle({ view, onChange }: ViewToggleProps) {
  return (
    <div className="flex border border-mist rounded-pill overflow-hidden">
      <button
        onClick={() => onChange("grid")}
        className={`px-4 py-2 text-xs font-mono uppercase tracking-widest transition-colors ${
          view === "grid" ? "bg-forest text-white" : "bg-white text-ink-soft"
        }`}
      >
        Grid
      </button>
      <button
        onClick={() => onChange("list")}
        className={`px-4 py-2 text-xs font-mono uppercase tracking-widest transition-colors ${
          view === "list" ? "bg-forest text-white" : "bg-white text-ink-soft"
        }`}
      >
        List
      </button>
    </div>
  );
}