import { Dialog } from '@chakra-ui/react'
import { X } from 'lucide-react'
import type { ReactNode } from 'react'
import { CalledItButton } from './CalledItButton'

export interface CalledItDialogProps {
  open: boolean
  onClose: () => void
  title: string
  children: ReactNode
  footer?: ReactNode
}

export function CalledItDialog({ open, onClose, title, children, footer }: CalledItDialogProps) {
  return (
    <Dialog.Root open={open} onOpenChange={(e) => { if (!e.open) onClose() }}>
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content bg="panel" borderColor="border" rounded="2xl">
          <Dialog.Header>
            <Dialog.Title color="heading">{title}</Dialog.Title>
            <Dialog.CloseTrigger asChild>
              <CalledItButton variant="ghost" size="sm" aria-label="Close" onClick={onClose}>
                <X size={16} />
              </CalledItButton>
            </Dialog.CloseTrigger>
          </Dialog.Header>
          <Dialog.Body>{children}</Dialog.Body>
          {footer && <Dialog.Footer>{footer}</Dialog.Footer>}
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  )
}
