import React, { useState } from "react";
import {
    FacebookShareButton,
    LinkedinShareButton,
    TwitterShareButton,
    WhatsappShareButton,
} from "react-share";
import JobSocial from "../../job-details/JobSocial";
import { sortAndDeduplicateDiagnostics } from "typescript";

interface SocialShareModalProps {
    shareUrl: string;
    title: string;
  }

const SocialShareModal : React.FC<SocialShareModalProps> = ( { shareUrl, title } ) => {


    const socialContent = [
        {
          id: 1,
          name: "Facebook",
          icon: "fa-facebook-f",
          iconClass: "facebook",
          link: `https://facebook.com/sharer/sharer.php?u=${shareUrl}`,
        },
        {
          id: 2,
          name: "Twitter",
          icon: "fa-twitter",
          iconClass: "twitter",
          link: `https://twitter.com/intent/tweet/?text=${shareUrl}`,
        },
        {
          id: 3,
          name: "Linkedin",
          icon: "fa-likedin",
          iconClass: "linkedin",
          link: `https://www.linkedin.com/shareArticle?mini=true&url=${shareUrl}`,
        },
      ];

    return (
        <div className="modal fade " id="shareModal" role="dialog">
            <div className="modal-dialog modal-dialog-centered" role="document">
                <div className="modal-content p-3">
                    <div className="modal-header">
                        <div className="d-flex flex-column justify-content-center align-items-center">
                            <div className="text-center">
                                <h3>{title}</h3>
                            </div>                       
                        </div>
                    </div>
                    <div className="modal-body">                       
                        <div className="other-options p">
                            <h6>Share this blog on social media:</h6>
                            <div className="social-share pt-4">
                                <JobSocial socialContent={socialContent} />
                            </div>
                        </div>

                        {/* <p>{shareUrl}</p> */}
                        {/* <div className="d-flex justify-content-around">
                            <FacebookShareButton url={shareUrl} title={title}>
                                <button className="btn btn-primary">Facebook</button>
                            </FacebookShareButton>
                            <TwitterShareButton url={shareUrl} title={title}>
                                <button className="btn btn-info">Twitter</button>
                            </TwitterShareButton>
                            <LinkedinShareButton url={shareUrl} title={title}>
                                <button className="btn btn-secondary">LinkedIn</button>
                            </LinkedinShareButton>
                            <WhatsappShareButton url={shareUrl} title={title}>
                                <button className="btn btn-success">WhatsApp</button>
                            </WhatsappShareButton>
                        </div> */}

                    </div>
                </div>
            </div>
        </div>
    )
}

export default SocialShareModal