type TabKey = "gear" | "planning" | "setups";

interface CollectionTabsProps {
	active: TabKey;
	onChange: (tab: TabKey) => void;
}

const tabs = [
	{ key: "gear" as const, label: "My Gear" },
	{ key: "planning" as const, label: "Planning" },
	{ key: "setups" as const, label: "Setups" },
];

export function CollectionTabs({ active, onChange }: CollectionTabsProps) {
	return (
		<div className="flex border-b border-gray-200">
			{tabs.map((tab) => (
				<button
					key={tab.key}
					type="button"
					onClick={() => onChange(tab.key)}
					className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
						active === tab.key
							? "text-gray-700"
							: "text-gray-500 hover:text-gray-700"
					}`}
				>
					{tab.label}
					{active === tab.key && (
						<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-700 rounded-t" />
					)}
				</button>
			))}
		</div>
	);
}