'use client';

// use this for now for consistency with the toast UX
import { CloseButton } from '@chakra-ui/react';
import React, { useState } from 'react';

interface ToastWithUndoProps {
  content: string;
  onUndo: () => void;
  onClose?: () => void;
}

const ToastWithUndo: React.FC<ToastWithUndoProps> = ({
  content,
  onUndo,
  onClose,
}) => {
  const [isUndone, setIsUndone] = useState(false);

  const handleUndo = () => {
    setIsUndone(true);
    onUndo();
  };

  return (
    !isUndone && (
      <div className='flex items-center justify-between rounded-md bg-dumbo-900 p-2 font-sans text-foreground-primary-on-light'>
        <p>
          <span className='font-bold'>{content}</span>
        </p>
        <div className='flex items-center'>
          <button
            onClick={handleUndo}
            className='mx-2 rounded-full border border-background-primary px-4 py-1 text-sm transition-colors duration-200 hover:bg-background-primary hover:text-foreground-primary'
          >
            Undo
          </button>
          {onClose && <CloseButton onClick={onClose} />}
        </div>
      </div>
    )
  );
};

export default ToastWithUndo;