'use client'
// src/components/ShareLinks.tsx
import { useState } from 'react'

interface ShareLinksProps {
  title: string
  url: string
}

const btnClass =
  'inline-flex items-center justify-center w-[34px] h-[34px] rounded-sm border border-hair-2 text-ink-2 hover:text-ink hover:border-ink transition-colors'

export function ShareLinks({ title, url }: ShareLinksProps) {
  const [copied, setCopied] = useState(false)

  const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(`${title} ${url}`)}`
  const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`

  async function handleCopy() {
    try {
      await navigator.clipboard.writeText(url)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch {
      // Clipboard write failed silently
    }
  }

  return (
    <div className="border-hair mt-8 border-t pt-5">
      <div className="text-ink-3 mb-3 font-mono text-[10.5px] tracking-[0.18em] uppercase">
        Share
      </div>
      <div className="flex gap-2">
        {/* Bluesky */}
        <a
          className={btnClass}
          href={blueskyUrl}
          target="_blank"
          rel="noopener noreferrer"
          title="Share on Bluesky"
          aria-label="Share on Bluesky"
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
          </svg>
        </a>

        {/* LinkedIn */}
        <a
          className={btnClass}
          href={linkedinUrl}
          target="_blank"
          rel="noopener noreferrer"
          title="Share on LinkedIn"
          aria-label="Share on LinkedIn"
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8.06h4.56V23H.22V8.06zM8.16 8.06h4.37v2.04h.06c.61-1.15 2.1-2.37 4.33-2.37 4.63 0 5.48 3.05 5.48 7.02V23h-4.56v-6.65c0-1.59-.03-3.64-2.22-3.64-2.22 0-2.56 1.73-2.56 3.52V23H8.16V8.06z" />
          </svg>
        </a>

        {/* Copy link */}
        <button
          type="button"
          className={`cursor-pointer bg-transparent ${btnClass}${copied ? ' text-ink border-ink' : ''}`}
          title={copied ? 'Copied!' : 'Copy link'}
          aria-label={copied ? 'Copied!' : 'Copy link'}
          onClick={handleCopy}
        >
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <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>
  )
}