"use client";

/**
 * 표준 다이얼로그 컴포넌트
 *
 * 디자인시스템관리 -> 다이얼로그 기준으로 작성된 공통 다이얼로그
 * - 반응형 지원 (모바일/태블릿/데스크톱)
 * - 접근성 준수 (DialogTitle 필수)
 * - 일관된 스타일링
 * - 상/하/좌/우 모든 마진 적용
 */

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";

export interface StandardDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description?: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
  size?: "sm" | "md" | "lg" | "xl" | "full";
  showClose?: boolean;
  className?: string;
}

const sizeClasses = {
  sm: "sm:max-w-sm",
  md: "sm:max-w-md",
  lg: "sm:max-w-lg",
  xl: "sm:max-w-xl",
  full: "sm:max-w-[95vw]",
};

/**
 * 표준 다이얼로그
 *
 * @example
 * ```tsx
 * <StandardDialog
 *   open={isOpen}
 *   onOpenChange={setIsOpen}
 *   title="품목 등록"
 *   description="새로운 품목을 등록합니다"
 *   size="lg"
 * >
 *   <div>컨텐츠</div>
 * </StandardDialog>
 * ```
 */
export function StandardDialog({
  open,
  onOpenChange,
  title,
  description,
  children,
  footer,
  size = "md",
  showClose: _showClose = true,
  className,
}: StandardDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className={cn(sizeClasses[size], className)}>
        <DialogHeader className="px-6 pt-6">
          <DialogTitle>{title}</DialogTitle>
          {description && <DialogDescription>{description}</DialogDescription>}
        </DialogHeader>

        <div className="px-6 pb-6 overflow-y-auto max-h-[60vh]">{children}</div>

        {footer && <DialogFooter>{footer}</DialogFooter>}
      </DialogContent>
    </Dialog>
  );
}

