import { Button, ButtonVariantType } from 'index'

import { ToastAction, Toaster, useToast } from './index'

interface ToastWithButtonProps {
  title?: string
  description?: string
  toastButtonLabel?: string
  buttonLabel?: string
  buttonVariant?: ButtonVariantType
}
export default ({
  title = '',
  description = '',
  toastButtonLabel = '',
  buttonLabel = '',
  buttonVariant = 'default',
}: ToastWithButtonProps) => {
  const { toast } = useToast()

  return (
    <>
      <Toaster />
      <Button
        variant={buttonVariant}
        onClick={() => {
          toast({
            title,
            description,
            action: (
              <ToastAction altText={toastButtonLabel}>
                {toastButtonLabel}
              </ToastAction>
            ),
          })
        }}
      >
        {buttonLabel}
      </Button>
    </>
  )
}
