import React from "react";
import { GridIcon, ListIcon, TableIcon } from "../../icons";
import Button from "../ui/button/Button";

export type ViewType = "table" | "kanban" | "list";

interface ViewToggleProps {
  currentView: ViewType;
  onViewChange: (view: ViewType) => void;
  className?: string;
}

const ViewToggle: React.FC<ViewToggleProps> = ({
  currentView,
  onViewChange,
  className = "",
}) => {
  const views: { type: ViewType; icon: React.ReactNode; label: string }[] = [
    { type: "table", icon: <TableIcon className="size-4" />, label: "Table" },
    { type: "kanban", icon: <GridIcon className="size-4" />, label: "Kanban" },
    { type: "list", icon: <ListIcon className="size-4" />, label: "List" },
  ];

  return (
    <div className={`inline-flex items-center gap-1 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900 ${className}`}>
      {views.map((view) => (
        <Button
          key={view.type}
          onClick={() => onViewChange(view.type)}
          variant={currentView === view.type ? "secondary" : "ghost"}
          tone="neutral"
          size="sm"
          className={currentView === view.type ? "shadow-sm" : ""}
          title={view.label}
          startIcon={view.icon}
        >
          <span className="hidden sm:inline">{view.label}</span>
        </Button>
      ))}
    </div>
  );
};

export default ViewToggle;