import type { ReactNode } from 'react'

/** Shared wrapper for teacher parity screens (CI `Views/teacher/*`). */
export function TeacherShell({
  title,
  subtitle,
  titleClassName,
  subtitleClassName,
  loading,
  error,
  flash,
  children,
}: {
  title: string
  subtitle?: string
  titleClassName?: string
  subtitleClassName?: string
  loading?: boolean
  error?: string | null
  flash?: string | null
  children: ReactNode
}) {
  return (
    <div className="teacher-page-wrap w-100 py-3 px-2">
      <div className="mb-3">
        <h1 className={`h3 mb-1 ${titleClassName ?? ''}`.trim()}>{title}</h1>
        {subtitle ? (
          <p className={`text-muted mb-0 ${subtitleClassName ?? ''}`.trim()}>{subtitle}</p>
        ) : null}
      </div>
      {flash ? (
        <div className="alert alert-info" role="alert">
          {flash}
        </div>
      ) : null}
      {error ? (
        <div className="alert alert-danger" role="alert">
          {error}
        </div>
      ) : null}
      {loading ? <p className="text-muted">Loading…</p> : null}
      {!loading && children}
    </div>
  )
}
