import React, { useState, useCallback } from 'react';
import CopyIcon from "../../SVG/CopyIcon";
import './copy-button.scss';

type CopyButtonProps = {
    text: string;
    message?: string;
};

const MESSAGE_DISPLAY_DURATION = 200000; // Duration in ms

const CopyButton: React.FC<CopyButtonProps> = ({ text, message = 'Το Περιεχόμενο Αντιγράφηκε' }) => {
    const [showMessage, setShowMessage] = useState(false);

    const hideMessage = useCallback(() => {
        setTimeout(() => setShowMessage(false), MESSAGE_DISPLAY_DURATION);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const copyToClipboard = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
        event.preventDefault();

        navigator.clipboard.writeText(text)
            .then(() => {
                setShowMessage(true);
                hideMessage();
            })
            .catch((error) => {
                console.error("Failed to copy text:", error);
            });
    }, [text, hideMessage]);

    return (
        <button className="copy-button" onClick={copyToClipboard}>
            <CopyIcon color="var(--text-color)" />
            {showMessage && (
                <div className="message show">
                    <p className="message-content">{message}</p>
                </div>
            )}
        </button>
    );
};

export default CopyButton;