'use client';
import { useState } from 'react';
import { Share2, Link2, Check } from 'lucide-react';

export default function ShareButtons({ title }: { title: string }) {
  const [copied, setCopied] = useState(false);
  const url = typeof window !== 'undefined' ? window.location.href : '';
  const enc = encodeURIComponent(url);
  const encT = encodeURIComponent(title);

  const links = [
    { label: 'X', href: `https://twitter.com/intent/tweet?url=${enc}&text=${encT}` },
    { label: 'Facebook', href: `https://www.facebook.com/sharer/sharer.php?u=${enc}` },
    { label: 'LinkedIn', href: `https://www.linkedin.com/sharing/share-offsite/?url=${enc}` },
  ];

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

  return (
    <div className="flex flex-wrap items-center gap-2">
      <span className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted">
        <Share2 size={14} /> Share
      </span>
      {links.map(({ label, href }) => (
        <a
          key={label}
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          className="rounded-full border border-surface bg-surface px-3 py-1.5 text-xs font-medium text-muted transition hover:border-brand-500 hover:text-brand-700 dark:hover:text-brand-300"
        >
          {label}
        </a>
      ))}
      <button
        onClick={copy}
        aria-label="Copy link"
        className="grid h-8 w-8 place-items-center rounded-full border border-surface bg-surface text-muted transition hover:border-brand-500 hover:text-brand-700 dark:hover:text-brand-300"
      >
        {copied ? <Check size={15} className="text-emerald-600" /> : <Link2 size={15} />}
      </button>
    </div>
  );
}