import { useLocation, useNavigate } from "react-router-dom";
import { Icon } from "../../icon";

interface SpacesBottomSheetProps {
	isOpen: boolean;
	onClose: () => void;
}

const SPACES_ITEMS = [
	{ to: "/projects", label: "Projects" },
	{ to: "/workspaces", label: "Workspaces" },
];

export const SpacesBottomSheet: React.FC<SpacesBottomSheetProps> = ({
	isOpen,
	onClose,
}) => {
	const location = useLocation();
	const navigate = useNavigate();

	if (!isOpen) return null;

	const handleSelect = (to: string) => {
		onClose();
		navigate(to);
	};

	return (
		<div
			className="mobile-bottom-sheet-overlay"
			onClick={onClose}
			role="presentation"
		>
			<div
				className="mobile-bottom-sheet"
				onClick={(e) => e.stopPropagation()}
				role="dialog"
				aria-label="Spaces menu"
			>
				<div className="mobile-bottom-sheet-header">
					<div className="mobile-bottom-sheet-handle" />
					<h3 className="mobile-bottom-sheet-title">Spaces</h3>
				</div>
				<div className="mobile-bottom-sheet-content">
					{SPACES_ITEMS.map((item) => (
						<button
							key={item.to}
							className={`mobile-bottom-sheet-item ${
								location.pathname === item.to ? "active" : ""
							}`}
							onClick={() => handleSelect(item.to)}
							type="button"
						>
							<span className="mobile-bottom-sheet-item-label">
								{item.label}
							</span>
							{location.pathname === item.to && (
								<Icon name="success" size="sm" />
							)}
						</button>
					))}
				</div>
			</div>
		</div>
	);
};
