/** Tab bar for the workspace detail page. */

import { Icon } from "../../icon";

export type WorkspaceTab = "files" | "git" | "tools" | "settings";

interface Tab {
	id: WorkspaceTab;
	label: string;
	icon: string;
}

const TABS: Tab[] = [
	{ id: "files", label: "Files", icon: "folder" },
	{ id: "git", label: "Git", icon: "branch" },
	{ id: "tools", label: "Tools", icon: "terminal" },
	{ id: "settings", label: "Settings", icon: "settings" },
];

interface WorkspaceTabBarProps {
	active: WorkspaceTab;
	onChange: (tab: WorkspaceTab) => void;
}

export function WorkspaceTabBar({ active, onChange }: WorkspaceTabBarProps) {
	return (
		<nav className="tab-bar" role="tablist">
			{TABS.map((tab) => (
				<button
					key={tab.id}
					className={`tab ${active === tab.id ? "active" : ""}`}
					onClick={() => onChange(tab.id)}
					role="tab"
					aria-selected={active === tab.id}
					type="button"
				>
					<Icon
						name={tab.icon as "folder" | "branch" | "terminal" | "settings"}
						size="sm"
					/>
					{tab.label}
				</button>
			))}
		</nav>
	);
}

export function WorkspaceMobileTabBar({
	active,
	onChange,
}: WorkspaceTabBarProps) {
	return (
		<nav className="mobile-tab-bar" role="tablist">
			{TABS.map((tab) => (
				<button
					key={tab.id}
					className={`mobile-tab ${active === tab.id ? "active" : ""}`}
					onClick={() => onChange(tab.id)}
					role="tab"
					aria-selected={active === tab.id}
					type="button"
				>
					<Icon
						name={tab.icon as "folder" | "branch" | "terminal" | "settings"}
					/>
					<span>{tab.label}</span>
				</button>
			))}
		</nav>
	);
}