'use client';

import type { ReactNode } from 'react';

type ResponsiveDialogOverlayProps = {
  children: ReactNode;
  onBackdropClick?: () => void;
  className?: string;
  zIndexClass?: string;
};

type ResponsiveDialogPanelProps = {
  children: ReactNode;
  className?: string;
  maxWidthClass?: string;
  role?: string;
  'aria-modal'?: boolean | 'true' | 'false';
  'aria-labelledby'?: string;
};

export function ResponsiveDialogOverlay({
  children,
  onBackdropClick,
  className = '',
  zIndexClass = 'z-50',
}: ResponsiveDialogOverlayProps) {
  return (
    <div
      className={`fixed inset-0 ${zIndexClass} flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50 ${className}`.trim()}
      role="presentation"
      onMouseDown={(e) => {
        if (onBackdropClick && e.target === e.currentTarget) {
          onBackdropClick();
        }
      }}
    >
      {children}
    </div>
  );
}

export function ResponsiveDialogPanel({
  children,
  className = '',
  maxWidthClass = 'sm:max-w-lg',
  role,
  'aria-modal': ariaModal,
  'aria-labelledby': ariaLabelledby,
}: ResponsiveDialogPanelProps) {
  return (
    <div
      className={`w-full ${maxWidthClass} max-h-[90dvh] overflow-y-auto rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-md)] border border-border bg-background-secondary p-4 sm:p-6 shadow-xl ${className}`.trim()}
      role={role}
      aria-modal={ariaModal}
      aria-labelledby={ariaLabelledby}
      onMouseDown={(e) => e.stopPropagation()}
    >
      {children}
    </div>
  );
}
