import type { ReactNode } from 'react';

type DialogSurfaceProps = {
  open: boolean;
  title: string;
  subtitle?: string;
  closeLabel?: string;
  widthClassName?: string;
  onClose: () => void;
  children: ReactNode;
};

export default function DialogSurface({
  open,
  title,
  subtitle,
  closeLabel = 'Close dialog',
  widthClassName = 'max-w-[560px]',
  onClose,
  children,
}: DialogSurfaceProps) {
  if (!open) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 px-4 py-6 backdrop-blur-[2px]"
      onClick={onClose}
    >
      <div
        className={[
          'w-full rounded-[20px] bg-[#F4F3EB] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
          widthClassName,
        ].join(' ')}
        onClick={(event) => event.stopPropagation()}
      >
        <div className="flex items-start justify-between border-b border-black/6 px-6 py-5 dark:border-white/6">
          <div className="min-w-0">
            <h2
              className="text-[20px] font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6]"
              style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
            >
              {title}
            </h2>
            {subtitle ? (
              <p className="mt-1 text-[13px] text-[#99A0AE] dark:text-gray-500">
                {subtitle}
              </p>
            ) : null}
          </div>

          <button
            type="button"
            className="mt-0.5 rounded-full p-1 text-[#99A0AE] transition-colors hover:text-[#171717] dark:hover:text-[#f3f4f6]"
            onClick={onClose}
            aria-label={closeLabel}
          >
            <svg viewBox="0 0 24 24" className="h-5 w-5 fill-none stroke-current" strokeWidth="1.8">
              <path d="M6 6L18 18M18 6L6 18" strokeLinecap="round" />
            </svg>
          </button>
        </div>

        <div className="px-6 pb-6 pt-5">{children}</div>
      </div>
    </div>
  );
}