import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialogs/dialog";
import * as React from "react";

export interface CustomDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description?: string;
  illustration?: React.ReactNode;
  actions?: React.ReactNode;
  className?: string;
  showCloseButton?: boolean;
}

export function CustomDialog({
  open,
  onOpenChange,
  title,
  description,
  illustration,
  actions,
  className,
  showCloseButton = true,
}: CustomDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className={`max-w-md bg-card p-8 ${className || ""}`}
        showCloseButton={showCloseButton}
      >
        <div className="flex flex-col items-center gap-6 text-center">

          {illustration && (
            <div className="flex items-center justify-center">
              {illustration}
            </div>
          )}

          <DialogHeader className="space-y-2">
            <DialogTitle className="text-center text-xl font-bold text-foreground">
              {title}
            </DialogTitle>
            {description && (
              <DialogDescription className="text-center text-base text-muted-foreground">
                {description}
              </DialogDescription>
            )}
          </DialogHeader>

          {actions && <DialogFooter className="w-full">{actions}</DialogFooter>}
        </div>
      </DialogContent>
    </Dialog>
  );
}

export interface CustomDialogButtonProps {
  onClick?: () => void;
  children: React.ReactNode;
  icon?: React.ReactNode;
  variant?: "primary" | "secondary";
  className?: string;
  disabled?: boolean;
}

export function CustomDialogButton({
  onClick,
  children,
  icon,
  variant = "primary",
  className,
  disabled,
}: CustomDialogButtonProps): React.ReactNode {
  const baseStyles =
    "flex h-14 w-full items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-bold transition-colors disabled:opacity-50";
  const variantStyles =
    variant === "primary"
      ? "bg-primary text-primary-foreground hover:bg-primary/90"
      : "bg-muted text-foreground hover:bg-muted/80";

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${baseStyles} ${variantStyles} ${className || ""}`}
    >
      {icon && <span className="size-5">{icon}</span>}
      <span>{children}</span>
    </button>
  );
}