import { LayoutGrid, Table2 } from "lucide-react";
import { ViewMode } from "@/types/asset-settings";

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

export function ViewModeToggle({
  viewMode,
  onViewModeChange,
}: ViewModeToggleProps) {
  return (
    <div className="flex rounded-lg border border-slate-300 bg-white p-1">
      <button
        onClick={() => onViewModeChange("table")}
        className={`px-3 py-1.5 text-xs font-medium transition-colors rounded ${
          viewMode === "table"
            ? "bg-[#428B4D] text-white"
            : "text-slate-700 hover:bg-slate-50"
        }`}
      >
        <div className="flex items-center gap-1.5">
          <Table2 className="h-3.5 w-3.5" />
          Table
        </div>
      </button>
      <button
        onClick={() => onViewModeChange("kanban")}
        className={`px-3 py-1.5 text-xs font-medium transition-colors rounded ${
          viewMode === "kanban"
            ? "bg-[#428B4D] text-white"
            : "text-slate-700 hover:bg-slate-50"
        }`}
      >
        <div className="flex items-center gap-1.5">
          <LayoutGrid className="h-3.5 w-3.5" />
          Kanban
        </div>
      </button>
    </div>
  );
}