import React from 'react'
import { X } from 'lucide-react'
import { cn } from '../../lib/utils'
interface DialogProps {
open: boolean
onOpenChange: (open: boolean) => void
children: React.ReactNode
className?: string
}
export function Dialog({ open, onOpenChange, children, className }: DialogProps) {
if (!open) return null
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center">
{/* Backdrop */}
<div
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
onClick={() => onOpenChange(false)}
/>
{/* Content Wrapper - styles now handled by DialogContent */}
<div className={cn("relative z-[100]", className)}>
{children}
</div>
</div>
)
}
interface DialogHeaderProps {
children: React.ReactNode
className?: string
}
export function DialogHeader({ children, className }: DialogHeaderProps) {
return (
<div className={cn("flex items-center justify-between p-6 border-b border-border", className)}>
{children}
</div>
)
}
interface DialogTitleProps {
children: React.ReactNode
className?: string
}
export function DialogTitle({ children, className }: DialogTitleProps) {
return (
<h2 className={cn("text-lg font-semibold", className)}>
{children}
</h2>
)
}
interface DialogCloseProps {
onClick?: () => void
className?: string
}
export function DialogClose({ onClick, className }: DialogCloseProps) {
return (
<button
onClick={onClick}
className={cn(
"rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100",
"focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
"disabled:pointer-events-none",
className
)}
>
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</button>
)
}
interface DialogContentProps {
children: React.ReactNode
className?: string
}
export function DialogContent({ children, className }: DialogContentProps) {
return (
<div className={cn(
"glass rounded-lg shadow-2xl overflow-hidden animate-in fade-in-0 zoom-in-95 duration-200",
"w-full bg-background border border-border",
"p-6 overflow-y-auto",
className
)}>
{children}
</div>
)
}
interface DialogFooterProps {
children: React.ReactNode
className?: string
}
export function DialogFooter({ children, className }: DialogFooterProps) {
return (
<div className={cn("flex items-center justify-end gap-2 p-6 border-t border-border", className)}>
{children}
</div>
)
}
