import React from "react";

export type ViewMode = "kanban" | "dependencies";

interface BoardTabsProps {
	activeView: ViewMode;
	onViewChange: (view: ViewMode) => void;
}

export default function BoardTabs({ activeView, onViewChange }: BoardTabsProps) {
	return (
		<div className="flex border-b border-gray-200 dark:border-gray-700 mb-4">
			<button
				type="button"
				onClick={() => onViewChange("kanban")}
				className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
					activeView === "kanban"
						? "border-blue-500 text-blue-600 dark:text-blue-400"
						: "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
				}`}
			>
				<span className="flex items-center gap-2">
					<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
						/>
					</svg>
					Kanban Board
				</span>
			</button>
			<button
				type="button"
				onClick={() => onViewChange("dependencies")}
				className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
					activeView === "dependencies"
						? "border-blue-500 text-blue-600 dark:text-blue-400"
						: "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
				}`}
			>
				<span className="flex items-center gap-2">
					<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
						/>
					</svg>
					Dependencies
				</span>
			</button>
		</div>
	);
}