import  { useState } from 'react';
import { FacebookShareButton, TwitterShareButton, WhatsappShareButton, LinkedinShareButton, FacebookIcon, TwitterIcon, WhatsappIcon, LinkedinIcon } from 'react-share';

interface ShareProps {
    url: string;
    adTitle: string;
}

const ShareComponent = ({ url, adTitle }: ShareProps) => {
    const [copied, setCopied] = useState(false);

    const copyToClipboard = () => {
        navigator.clipboard.writeText(url)
            .then(() => {
                setCopied(true);
                setTimeout(() => setCopied(false), 2000);
            })
            .catch((error) => {
                console.error('Failed to copy text: ', error);
            });
    };

    return (
        <div id="section7" className="section-hm new-sect descrp2 share-me pt50" style={{ marginTop: '5px' }}>
            <div className="container">
                <div className="row at-center">
                    <div className="col-sm-12 d-min-height">
                        <div className="project-title">
                            <ul className="about-g-t more2">
                                <li className='heading-primary-text dark-bg-light'>Get another opinion,</li>
                                <li>Share {adTitle} </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div className="share-info">
                    <div className="row">
                        <div className="col-sm-6">
                            <div className="copylink">
                                <div className="col-sm-12weft">
                                    <div className="input-group mb-3">
                                        <input
                                            type="text"
                                            className="form-control"
                                            readOnly
                                            id="cpy_text"
                                            value={url}
                                        />
                                        <div className="input-group-append">
                                            <span
                                                className={`input-group-text ${copied ? 'copied' : ''}`}
                                                id="basic-addon2"
                                                onClick={copyToClipboard}
                                            >
                                                {copied ? 'Link Copied!' : 'Copy Link'}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-sm-6">
                            <div className="social-share-buttons">
                                {/* Facebook Share Button */}
                                <FacebookShareButton
                                    url={url}
                                    
                                    
                                >
                                    <FacebookIcon size={48} round={true} />
                                </FacebookShareButton>

                                {/* Twitter Share Button */}
                                <TwitterShareButton url={url} title={adTitle}>
                                    <TwitterIcon size={48} round={true} />
                                </TwitterShareButton>

                                {/* WhatsApp Share Button */}
                                <WhatsappShareButton url={url} title={adTitle}>
                                    <WhatsappIcon size={48} round={true} />
                                </WhatsappShareButton>

                                {/* LinkedIn Share Button */}
                                <LinkedinShareButton url={url} title={adTitle}>
                                    <LinkedinIcon size={48} round={true} />
                                </LinkedinShareButton>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ShareComponent;