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

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)}
          className={`inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
            currentView === view.type
              ? "bg-white text-gray-900 dark:bg-gray-800 dark:text-white shadow-sm"
              : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
          }`}
          title={view.label}
        >
          {view.icon}
          <span className="hidden sm:inline">{view.label}</span>
        </button>
      ))}
    </div>
  );
};

export default ViewToggle;

