import { PLATFORMS } from '../utils/api'

export default function PlatformIcon({ platform, size = 16, showLabel = false, className = '' }) {
  const p = PLATFORMS[platform]
  if (!p) return <span className="text-[10px] text-text-tertiary capitalize">{platform}</span>

  return (
    <span className={`inline-flex items-center gap-1 ${className}`} title={p.label}>
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill={p.color}
        className="shrink-0"
      >
        <path d={p.icon} />
      </svg>
      {showLabel && <span className="text-xs text-text-secondary">{p.label}</span>}
    </span>
  )
}

export function PlatformIcons({ platforms = [], size = 14, gap = 'gap-1', className = '' }) {
  if (!platforms || platforms.length === 0) return null
  return (
    <span className={`inline-flex items-center ${gap} ${className}`}>
      {platforms.map(p => <PlatformIcon key={p} platform={p} size={size} />)}
    </span>
  )
}