import type { ReactNode } from "react";
import { cn } from "../../lib/cn";

export function Drawer({
  children,
  dismissable = false,
  isOpen,
  onOpenChange,
  side = "right",
  title,
}: {
  children?: ReactNode;
  dismissable?: boolean;
  isOpen: boolean;
  onOpenChange?: (isOpen: boolean) => void;
  side?: "left" | "right";
  title: string;
}) {
  if (!isOpen) {
    return null;
  }

  return (
    <div
      className="fixed inset-0 z-40 bg-[var(--uhuru-overlay-scrim)]"
      onPointerDown={(event) => {
        if (dismissable && event.target === event.currentTarget) {
          onOpenChange?.(false);
        }
      }}
    >
      <div
        className={cn(
          "absolute top-0 h-full w-full max-w-md border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] shadow-[var(--uhuru-shadow-lg)]",
          side === "right" ? "right-0 border-l" : "left-0 border-r",
        )}
      >
        <div className="border-b border-[var(--uhuru-border-subtle)] px-5 py-4">
          <h3 className="m-0 text-xl text-[var(--uhuru-text-primary)]">{title}</h3>
        </div>
        <div className="p-5">{children}</div>
      </div>
    </div>
  );
}