import React, { useState } from 'react';
import Modal from '@/components/Modal';
import { UserPlus } from 'lucide-react';

const AlertWithModal = ({ title, message, buttonText }) => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  return (
    <div
      className="alert centered bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4"
      role="alert"
    >
      <h3 className="font-bold">{title}</h3>
      <p className="mt-2">{message}</p>
      <div className="alert-actions mt-4">
        <button
          className="btn primary bg-emerald-500 text-white rounded-md px-4 py-2 hover:bg-emerald-600 flex items-center"
          onClick={openModal}
        >
          {buttonText} <UserPlus size={20} className="ml-2" />
        </button>
      </div>
      <Modal isOpen={isOpen} setIsOpen={setIsOpen} />
    </div>
  );
};

export default AlertWithModal;