import React from 'react'

const ICONS = {
  public:    { icon: 'fa-globe',        label: 'Public',    cls: 'text-slate-500' },
  followers: { icon: 'fa-user-friends', label: 'Followers', cls: 'text-sky-500/70' },
  private:   { icon: 'fa-lock',         label: 'Private',   cls: 'text-amber-500/70' },
}

export default function VisibilityPill({ visibility, showLabel = false }) {
  const v = ICONS[visibility] ?? ICONS.public

  return (
    <span
      className={`inline-flex items-center gap-1 text-xs ${v.cls}`}
      title={v.label}
      aria-label={`Visibility: ${v.label}`}
    >
      <i className={`fa-solid ${v.icon} fa-fw`} />
      {showLabel && <span>{v.label}</span>}
    </span>
  )
}