import React, { useEffect, useRef } from "react";

import { Button } from "@/components/ui/button/button";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";

const ShareButton = () => {
  const shareButtonRef = useRef<HTMLButtonElement>(null);

  const handleClickShareButton = () => {
    navigator.share({
      url: window.location.href,
      title: document.title,
      text: "Check out this page!",
    });
  };

  useEffect(() => {
    if (shareButtonRef.current) {
      const button = shareButtonRef.current;
      button.style.display = "none";

      // eslint-disable-next-line no-extra-boolean-cast
      if (!!navigator?.canShare) {
        button.style.display = "block";
      }
    }
  });

  return (
    <Button
      ref={shareButtonRef}
      variant="outline"
      onClick={handleClickShareButton}
    >
      <LIcon name="Share" className="text-gray-500" size={20} />
    </Button>
  );
};

export default ShareButton;