import { useSchoolYear } from '../../context/SchoolYearContext'

export function ReadOnlyBanner({ className = '' }: { className?: string }) {
  const { selectedSchoolYear, isReadOnlyYear } = useSchoolYear()

  if (!selectedSchoolYear || !isReadOnlyYear) return null

  return (
    <div className={`alert alert-warning d-flex align-items-start gap-2 mb-3 ${className}`.trim()} role="status">
      <i className="bi bi-lock-fill mt-1" aria-hidden />
      <div>
        <div className="fw-semibold">
          Viewing archived school year: {selectedSchoolYear.name}
        </div>
        <div className="small">
          Read-only mode. Add, edit, delete, import, attendance, grading, invoice, payment,
          promotion, assignment, upload, and year-bound communication actions should remain disabled.
          The API still has to reject forbidden writes, because buttons are not security.
        </div>
      </div>
    </div>
  )
}
