import { useAuth } from '../context/AuthContext'

/**
 * Hinweis, wenn der Vereinszugang (Mitgliedschaft) deaktiviert wurde — Login bleibt möglich.
 */
export default function InactiveMembershipBanner() {
  const { user } = useAuth()
  const inactive = (user?.clubs || []).filter(
    (c) => (c.membership_status || '').toString().trim().toLowerCase() === 'inactive'
  )
  if (!inactive.length) return null

  const names = inactive.map((c) => c.name || `Verein #${c.id}`).join(', ')

  return (
    <div
      role="status"
      className="inactive-membership-banner"
      style={{
        marginBottom: '0.75rem',
        padding: '0.65rem 0.85rem',
        borderRadius: '8px',
        background: 'var(--surface2, #2a2a2a)',
        border: '1px solid color-mix(in srgb, var(--warning, #d4a012) 45%, transparent)',
        color: 'var(--text1)',
        fontSize: '0.88rem',
        lineHeight: 1.45,
      }}
    >
      <strong>Vereinszugang vorübergehend deaktiviert</strong>
      <span style={{ display: 'block', marginTop: '0.35rem' }}>
        Für {inactive.length === 1 ? 'den Verein' : 'die Vereine'}{' '}
        <strong>{names}</strong>{' '}
        ist der Zugang zu Vereinsinhalten ausgesetzt — du kannst dich weiterhin anmelden und z.&nbsp;B.
        öffentliche Inhalte oder andere Vereine nutzen. Bei Fragen wende dich an eine:n Vereinsadministrator:in.
      </span>
    </div>
  )
}