AttributionList.tsx

import { Link } from 'vocs'
import contributorsData from '../../docs/pages/config/contributors.json'
import './AttributionList.css'

interface Contributor {
  name: string
  avatar?: string
  github?: string
  company?: string
}

interface ContributorRole {
  role: string
  users: string[]
}

interface AttributionListProps {
  contributors?: ContributorRole[]
}

const ROLE_ALIASES: Record<string, string> = {
  'wrote': 'Authored by',
  'reviewed': 'Reviewed by',
  'fact-checked': 'Fact-checked by'
}

function getContributor(slug: string): Contributor | null {
  const contributor = (contributorsData as unknown as Record<string, Contributor>)[slug]
  return contributor || null
}

function ContributorItem({ contributor }: { contributor: Contributor }) {
  return (
    <div className="contributor-item">
      {contributor.avatar && (
        <img 
          src={contributor.avatar} 
          alt={contributor.name}
          className="contributor-avatar"
        />
      )}
      <div className="contributor-info">
        <div className="contributor-name-line">
          <span className="contributor-name">{contributor.name}</span>
          {contributor.github && (
            <a href={contributor.github} target="_blank" rel="noopener noreferrer" title="GitHub" className="contributor-link">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
              </svg>
            </a>
          )}
        </div>
        {contributor.company && (
          <div className="contributor-company">{contributor.company}</div>
        )}
      </div>
    </div>
  )
}

function RoleSection({ role, userSlugs }: { role: string; userSlugs: string[] }) {
  const roleTitle = ROLE_ALIASES[role] || role
  const contributors = userSlugs
    .map(getContributor)
    .filter((c): c is Contributor => c !== null)

  if (contributors.length === 0) return null

  return (
    <div className="role-section">
      <h4 className="role-title">{roleTitle}:</h4>
      <div className="contributors-list">
        {contributors.map((contributor, index) => (
          <ContributorItem key={index} contributor={contributor} />
        ))}
      </div>
    </div>
  )
}

function hasAnyContributor(contributors: ContributorRole[]): boolean {
  return contributors.some(group =>
    Array.isArray(group?.users) &&
    group.users.some(slug => getContributor(slug) !== null)
  )
}

export function AttributionList({ contributors = [] }: AttributionListProps) {
  const roleGroups = Array.isArray(contributors) ? contributors : []

  if (!hasAnyContributor(roleGroups)) {
    return (
      <div className="attribution-container attribution-empty">
        <p className="attribution-placeholder">
          No contributors yet.{' '}
          <Link
            to="/contribute/contributing"
            className="attribution-placeholder-link"
          >
            Be the first to contribute
          </Link>
          !
        </p>
      </div>
    )
  }

  return (
    <div className="attribution-container">
      {roleGroups.map((roleGroup, index) => (
        <RoleSection 
          key={index}
          role={roleGroup.role} 
          userSlugs={roleGroup.users}
        />
      ))}
    </div>
  )
}