"use client";

import { CheckIcon, Link2Icon } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";

const BUTTON_CLASS =
  "flex size-[38px] items-center justify-center rounded-full border border-hairline text-foreground transition-colors hover:border-gold hover:text-gold-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold";

export default function ShareButtons({ url, title }: { url: string; title: string }) {
  const t = useTranslations("BlogPage.article");
  const [copied, setCopied] = useState(false);

  const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
  const xUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`;

  const copyLink = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 2000);
    } catch {
      // Clipboard API unavailable (insecure context) — silently no-op.
    }
  };

  return (
    <div className="flex items-center gap-2.5">
      <a
        href={linkedInUrl}
        target="_blank"
        rel="noopener noreferrer"
        aria-label={t("shareLinkedIn")}
        className={BUTTON_CLASS}
      >
        <span aria-hidden="true" className="text-[11px] font-semibold tracking-tight">
          in
        </span>
      </a>
      <a
        href={xUrl}
        target="_blank"
        rel="noopener noreferrer"
        aria-label={t("shareX")}
        className={BUTTON_CLASS}
      >
        <span aria-hidden="true" className="text-[13px] font-semibold">
          X
        </span>
      </a>
      <button type="button" onClick={copyLink} aria-label={t("copyLink")} className={BUTTON_CLASS}>
        {copied ? (
          <CheckIcon aria-hidden="true" className="size-[15px]" />
        ) : (
          <Link2Icon aria-hidden="true" className="size-[15px]" />
        )}
      </button>
      <span aria-live="polite" className="sr-only">
        {copied ? t("linkCopied") : ""}
      </span>
    </div>
  );
}