import React from 'react'

const STYLES = {
  public: 'border-emerald-400/25 bg-emerald-400/10 text-emerald-100',
  unlisted: 'border-amber-300/25 bg-amber-300/10 text-amber-100',
  private: 'border-white/15 bg-white/6 text-slate-200',
}

const LABELS = {
  public: 'Public',
  unlisted: 'Unlisted',
  private: 'Private',
}

export default function CollectionVisibilityBadge({ visibility, className = '' }) {
  const value = String(visibility || 'public').toLowerCase()
  const label = LABELS[value] || 'Public'
  const style = STYLES[value] || STYLES.public

  return (
    <span className={`inline-flex items-center rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] ${style} ${className}`.trim()}>
      {label}
    </span>
  )
}