import { useState } from "react";
import { Icon } from "../components/ui";
import {
	ToolTypesTab,
	ToolConfigsTab,
	ConfigFoldersTab,
} from "../components/features/tool-workshop";

type Tab = "types" | "configs" | "folders";

export const ToolWorkshopPage = () => {
	const [activeTab, setActiveTab] = useState<Tab>("types");

	return (
		<div className="container">
			<div
				style={{
					display: "flex",
					justifyContent: "space-between",
					alignItems: "center",
					marginBottom: "1rem",
				}}
			>
				<h1>Tool Workshop</h1>
			</div>

			<div
				className="tabs"
				style={{
					display: "flex",
					gap: "0.5rem",
					marginBottom: "1rem",
					borderBottom: "1px solid var(--color-border)",
				}}
			>
				{(["types", "configs", "folders"] as Tab[]).map((tab) => (
					<button
						key={tab}
						onClick={() => setActiveTab(tab)}
						className={activeTab === tab ? "tab-active" : "tab"}
						style={{
							padding: "0.5rem 1rem",
							borderBottom:
								activeTab === tab
									? "2px solid var(--color-primary)"
									: "2px solid transparent",
							background: "none",
							border: "none",
							cursor: "pointer",
							fontWeight: activeTab === tab ? 600 : 400,
						}}
					>
						{tab === "types" && (
							<>
								<Icon name="code" size="sm" /> Tool Types
							</>
						)}
						{tab === "configs" && (
							<>
								<Icon name="settings" size="sm" /> Configs
							</>
						)}
						{tab === "folders" && (
							<>
								<Icon name="folder" size="sm" /> Config Folders
							</>
						)}
					</button>
				))}
			</div>

			{activeTab === "types" && <ToolTypesTab />}
			{activeTab === "configs" && <ToolConfigsTab />}
			{activeTab === "folders" && <ConfigFoldersTab />}
		</div>
	);
};