import React from 'react';

type BaseProps = {
  children?: React.ReactNode;
  className?: string;
};

type DialogProps = BaseProps & {
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
};

export const Dialog: React.FC<DialogProps> = ({ children, open, onOpenChange }) => {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="relative bg-background p-6 rounded-lg shadow-lg max-w-lg w-full">
        {children}
        <button 
          className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
          onClick={() => onOpenChange?.(false)}
        >
          ✕
        </button>
      </div>
    </div>
  );
};

export const DialogContent: React.FC<BaseProps> = ({ children, className }) => {
  return <div className={className}>{children}</div>;
};

export const DialogHeader: React.FC<BaseProps> = ({ children, className }) => {
  return <div className={`flex flex-col space-y-1.5 text-center sm:text-left ${className}`}>{children}</div>;
};

export const DialogTitle: React.FC<BaseProps> = ({ children, className }) => {
  return <h3 className={`text-lg font-semibold leading-none tracking-tight ${className}`}>{children}</h3>;
};

export const DialogDescription: React.FC<BaseProps> = ({ children, className }) => {
  return <p className={`text-sm text-muted-foreground ${className}`}>{children}</p>;
};

export const DialogFooter: React.FC<BaseProps> = ({ children, className }) => {
  return <div className={`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ${className}`}>{children}</div>;
};
