'use client'

import { FaceBookIcon, TelegramIcon, TikTokkIcon, WhatsAppIcon } from '@/components/icons/socials'

import { FacebookShareButton, TelegramShareButton, WhatsappShareButton } from 'react-share'

import { useEffect, useState } from 'react'
import { Link } from 'lucide-react'

export const ShareButtons = () => {
  const [url, setUrl] = useState('')

  useEffect(() => {
    setUrl(window.location.href)
  }, [])

  return (
    <div className="flex gap-2">
      <div
        className="flex justify-center items-center p-2 md:p-4 rounded-lg cursor-pointer bg-grey-700 hover:bg-grey-600"
        onClick={() => navigator.clipboard.writeText(url)}
      >
        <Link width={20} height={20} stroke="#F6ECE5" />
      </div>
      <FacebookShareButton url={url}>
        <div className="flex justify-center items-center p-2 md:p-4 rounded-lg cursor-pointer bg-grey-700 hover:bg-grey-600">
          <FaceBookIcon width={20} height={20} fill="#F6ECE5" />
        </div>
      </FacebookShareButton>

      <TelegramShareButton url={url}>
        <div className="flex justify-center items-center p-2 md:p-4 rounded-lg cursor-pointer bg-grey-700 hover:bg-grey-600">
          <TelegramIcon width={20} height={20} fill="#F6ECE5" />
        </div>
      </TelegramShareButton>

      <WhatsappShareButton url={url}>
        <div className="flex justify-center items-center p-2 md:p-4 rounded-lg cursor-pointer bg-grey-700 hover:bg-grey-600">
          <WhatsAppIcon width={20} height={20} fill="#F6ECE5" />
        </div>
      </WhatsappShareButton>
      {/* <div
        className="flex justify-center items-center p-2 md:p-4 rounded-lg cursor-pointer bg-grey-700 hover:bg-grey-600"
        onClick={() => navigator.clipboard.writeText(url)}
      >
        <TikTokkIcon width={20} height={20} fill="#F6ECE5" />
      </div> */}
    </div>
  )
}
