import { useState } from 'react';

const ContactButton = ({ buttonText, email }) => {
  const [hovered, setHovered] = useState(false);
  const [copied, setCopied] = useState(false);

  const handleHover = () => {
    setHovered(true);
  };

  const handleMouseLeave = () => {
    setHovered(false);
  };

  const handleClick = () => {
    navigator.clipboard.writeText(email);
    setCopied(true);
    setTimeout(() => {
      setCopied(false);
    }, 2000);
  };

  return (
    <button
      className={`px-20 mt-8 mx-5 py-2 text-white border rounded focus:outline-none ${
        hovered
          ? 'border-white transition duration-300 ease-in-out'
          : 'border-blue-500 transition duration-300 ease-in-out'
      }`}
      onMouseEnter={handleHover}
      onMouseLeave={handleMouseLeave}
      onClick={handleClick}
    >
      {copied ? 'Email copied to your clipboard.' : hovered ? email : buttonText}
    </button>
  );
};

export default ContactButton;