'use client';

import { EvidencePayload } from './types';
import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaPython } from 'react-icons/fa';

function ProviderIcon({ provider }: { provider: string }) {
  const n = (provider || '').toLowerCase();
  if (n.includes('github')) return <FaGithub />;
  if (n.includes('gitlab')) return <FaGitlab />;
  if (n.includes('stack')) return <FaStackOverflow />;
  if (n.includes('google')) return <FaGoogle />;
  if (n.includes('linkedin')) return <FaLinkedin />;
  if (n.includes('python')) return <FaPython />;
  return <span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
}

export default function EvidenceBlock({ data }: { data: EvidencePayload }) {
  if (!data?.claims || data.claims.length === 0) return null;
  return (
    <div className={'mt-2 p-2 rounded border text-sm'} style={{ borderColor: 'var(--icon-button-secondary)', color: 'var(--text-main)' }}>
      {data.claims.map((c, idx) => (
        <div key={idx} className={'mb-3 last:mb-0'}>
          <div className={'font-semibold mb-1'}>{c.claim}</div>
          <div className={'space-y-1'}>
            {c.items.map((it, i) => (
              <div key={i} className={'flex items-center gap-2'}>
                <span className={'text-base'} style={{ color: 'var(--text-secondary)' }}><ProviderIcon provider={it.provider} /></span>
                <a href={it.url} target={'_blank'} rel={'noopener noreferrer'} className={'underline'} style={{ color: 'var(--icon-accent)' }}>{it.title}</a>
                {it.date ? <span className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>{new Date(it.date).toLocaleDateString()}</span> : null}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}