'use client';

import React, { useState } from 'react';

import logWebUserEvent from '@/logging/logWebUserEvent';
import { Persona } from '@/state/personaStore';

interface TrashPersonaToastProps {
  persona: Persona;
  undoTrash: () => void;
}

const TrashPersonaToast: React.FC<TrashPersonaToastProps> = ({
  persona,
  undoTrash,
}) => {
  const [isUndone, setIsUndone] = useState(false);

  const handleUndo = () => {
    setIsUndone(true);
    undoTrash();

    logWebUserEvent({
      actionName: 'UndoPersonaTrashToastClicked',
    });
  };

  return (
    <div className='flex items-center justify-between rounded-md bg-dumbo-900 p-3 font-sans text-foreground-primary-on-light'>
      <p>
        <span className='font-bold'>{persona.name}</span>
        {isUndone ? ' restored to library' : ' moved to trash'}
      </p>
      {!isUndone && (
        <button
          onClick={handleUndo}
          className='ml-2 rounded-full border border-foreground-primary px-3 py-1 text-sm transition-colors duration-200 hover:bg-background-primary hover:text-primary'
        >
          Undo
        </button>
      )}
    </div>
  );
};

export default TrashPersonaToast;