IPFS-portal-deploy/src/app/explorer/components/PinBadge.tsx

'use client';

import { useState } from 'react';
import { CheckCircle, Pin } from 'lucide-react';
import { addPin } from '@/lib/api/pins';

interface PinBadgeProps {
  cid: string;
  isPinned: boolean;
  onPin: (cid: string) => void;
}

export default function PinBadge({ cid, isPinned, onPin }: PinBadgeProps) {
  const [pinning, setPinning] = useState(false);

  async function handlePin() {
    setPinning(true);
    try {
      await addPin(cid);
      onPin(cid);
    } catch (err) {
      console.error('[PinBadge] Failed to pin CID:', err);
    } finally {
      setPinning(false);
    }
  }

  if (isPinned) {
    return (
      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-accent-green/10 text-accent-green text-xs font-medium">
        <CheckCircle className="w-3.5 h-3.5" />
        Pinned
      </span>
    );
  }

  return (
    <button
      onClick={handlePin}
      disabled={pinning}
      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-surface-600 text-surface-300 text-xs font-medium hover:bg-surface-700 hover:border-surface-500 transition-colors disabled:opacity-50"
    >
      <Pin className="w-3.5 h-3.5" />
      {pinning ? 'Pinning…' : 'Pin this CID'}
    </button>
  );
}