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>
  );
};