"use client";

import { useState } from "react";

import styles from "../blog.module.css";

/** Share rail — X, LinkedIn, and copy-link (design `.share-row`). */
export function ShareButtons({
  label,
  title,
}: {
  label: string;
  title: string;
}) {
  const [copied, setCopied] = useState(false);

  const open = (kind: "x" | "linkedin") => {
    const url = encodeURIComponent(window.location.href);
    const text = encodeURIComponent(title);
    const href =
      kind === "x"
        ? `https://twitter.com/intent/tweet?url=${url}&text=${text}`
        : `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
    window.open(href, "_blank", "noopener,noreferrer");
  };

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      setCopied(true);
      setTimeout(() => setCopied(false), 1400);
    } catch {
      // ignore
    }
  };

  return (
    <div className={styles.shareBox}>
      <div className={styles.shareH}>{label}</div>
      <div className={styles.shareRow}>
        <button
          type="button"
          className={styles.shareBtn}
          onClick={() => open("x")}
          aria-label="Share on X"
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
          </svg>
        </button>
        <button
          type="button"
          className={styles.shareBtn}
          onClick={() => open("linkedin")}
          aria-label="Share on LinkedIn"
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
            <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8.34 17V9.99H6.06V17zm-1.14-8.2a1.32 1.32 0 1 0 0-2.64 1.32 1.32 0 0 0 0 2.64zM18 17v-3.86c0-2.06-.44-3.65-2.85-3.65-1.16 0-1.94.64-2.26 1.24h-.03V9.99H10.6V17h2.28v-3.47c0-.92.17-1.8 1.3-1.8s1.14 1.04 1.14 1.86V17z" />
          </svg>
        </button>
        <button
          type="button"
          className={styles.shareBtn}
          onClick={copy}
          aria-label={copied ? "Copied!" : "Copy link"}
          title={copied ? "Copied!" : "Copy link"}
        >
          <svg
            width="15"
            height="15"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
          </svg>
        </button>
      </div>
    </div>
  );
}