import { Flex, Text } from '@chakra-ui/react'
import { CalledItButton } from './CalledItButton'
import { CalledItDialog } from './CalledItDialog'

export interface CalledItConfirmDialogProps {
  open: boolean
  onClose: () => void
  onConfirm: () => void
  title: string
  description?: string
  confirmLabel?: string
}

export function CalledItConfirmDialog({
  open,
  onClose,
  onConfirm,
  title,
  description,
  confirmLabel = 'Delete',
}: CalledItConfirmDialogProps) {
  return (
    <CalledItDialog
      open={open}
      onClose={onClose}
      title={title}
      footer={
        <Flex gap="2">
          <CalledItButton colorPalette="red" onClick={onConfirm}>{confirmLabel}</CalledItButton>
          <CalledItButton variant="ghost" onClick={onClose}>Cancel</CalledItButton>
        </Flex>
      }
    >
      {description && <Text color="text">{description}</Text>}
    </CalledItDialog>
  )
}
