headquarter/apps/web/src/components/mobile-action-sheet.tsx

import { useEffect, useRef } from "react";
import { Icon } from "@/components/ui/Icon";
import type { IconName } from "@/components/ui/Icon";

export interface MobileActionSheetItem {
  id: string;
  label: string;
  icon?: IconName;
  variant?: "default" | "danger";
  onClick: () => void;
}

interface MobileActionSheetProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  actions: MobileActionSheetItem[];
}

export function MobileActionSheet({
  isOpen,
  onClose,
  title,
  actions,
}: MobileActionSheetProps) {
  const sheetRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [isOpen]);

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape" && isOpen) {
        onClose();
      }
    };
    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="mobile-action-sheet-overlay" onClick={onClose}>
      <div
        ref={sheetRef}
        className="mobile-action-sheet"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="mobile-action-sheet-header">
          <div className="mobile-action-sheet-handle" />
          <h3>{title}</h3>
        </div>
        <div className="mobile-action-sheet-actions">
          {actions.map((action) => (
            <button
              key={action.id}
              className={`mobile-action-sheet-button ${action.variant || "default"}`}
              onClick={() => {
                action.onClick();
                onClose();
              }}
              type="button"
            >
              {action.icon && <Icon name={action.icon} size="md" />}
              <span>{action.label}</span>
            </button>
          ))}
        </div>
        <button
          className="mobile-action-sheet-cancel"
          onClick={onClose}
          type="button"
        >
          Cancel
        </button>
      </div>
    </div>
  );
}