"use client";
import { useEffect } from "react";
import { Share2, Link as LinkIcon, Check } from "lucide-react";
import { useState } from "react";

interface Props {
  url: string;
  title: string;
}

export function ShareButtons({ url, title }: Props) {
  const [copied, setCopied] = useState(false);
  const [supportsShare, setSupportsShare] = useState(false);

  useEffect(() => {
    setSupportsShare(typeof navigator !== "undefined" && !!navigator.share);
  }, []);

  async function copy() {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {}
  }

  async function nativeShare() {
    try {
      await navigator.share?.({ title, url });
    } catch {}
  }

  return (
    <div className="flex gap-1.5">
      <a
        className="btn-secondary !p-2"
        href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`}
        target="_blank"
        rel="noreferrer"
        aria-label="Chia sẻ Facebook"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
          <path d="M22 12c0-5.5-4.5-10-10-10S2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H8v-2.9h2.4V9.8c0-2.4 1.4-3.7 3.6-3.7 1 0 2.1.2 2.1.2v2.3h-1.2c-1.2 0-1.5.7-1.5 1.5V12H16l-.4 2.9h-2.2v7C18.3 21.1 22 17 22 12z" />
        </svg>
      </a>
      <a
        className="btn-secondary !p-2"
        href={`https://zalo.me/share/url?url=${encodeURIComponent(url)}`}
        target="_blank"
        rel="noreferrer"
        aria-label="Chia sẻ Zalo"
      >
        <span className="text-xs font-bold">Z</span>
      </a>
      <a
        className="btn-secondary !p-2"
        href={`https://x.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`}
        target="_blank"
        rel="noreferrer"
        aria-label="Chia sẻ X"
      >
        <span className="text-xs font-bold">𝕏</span>
      </a>
      <button onClick={copy} className="btn-secondary !p-2" aria-label="Sao chép link">
        {copied ? <Check size={16} /> : <LinkIcon size={16} />}
      </button>
      {supportsShare && (
        <button onClick={nativeShare} className="btn-secondary !p-2 sm:hidden" aria-label="Chia sẻ">
          <Share2 size={16} />
        </button>
      )}
    </div>
  );
}