import { splitUnitTitle } from './classProgressUtils'

/** CI `admin/partials/class_progress_unit_display.php` */
export function ClassProgressUnitDisplay({
  unitTitle,
  isQuran,
  compact,
}: {
  unitTitle?: string | null
  isQuran?: boolean
  compact?: boolean
}) {
  const { curriculum, custom } = splitUnitTitle(unitTitle)
  const labelCurriculum = isQuran ? 'Surah / curriculum' : 'Unit / chapter'
  const labelCustom = isQuran ? 'Custom Surah / Arabic' : 'Custom subject(s)'

  if (!String(unitTitle ?? '').trim()) return <span className="text-muted">-</span>

  if (compact) {
    return (
      <>
        {custom.length > 0 ? (
          <div className="small">
            <span className="badge text-bg-info me-1">{isQuran ? 'Custom' : 'Custom subject'}</span>
            {custom.join(', ')}
          </div>
        ) : null}
        {curriculum.length > 0 ? (
          <div className={`small text-muted${custom.length > 0 ? ' mt-1' : ''}`}>{curriculum.join(' · ')}</div>
        ) : null}
        {custom.length === 0 && curriculum.length === 0 ? (
          <div className="small text-muted">{String(unitTitle)}</div>
        ) : null}
      </>
    )
  }

  return (
    <>
      {curriculum.length > 0 ? (
        <div className="mb-2">
          <strong>{labelCurriculum}:</strong> {curriculum.join(' ; ')}
        </div>
      ) : null}
      {custom.length > 0 ? (
        <div className="mb-2">
          <strong>{labelCustom}:</strong> {custom.join(' ; ')}
        </div>
      ) : null}
      {curriculum.length === 0 && custom.length === 0 ? (
        <div className="mb-2">
          <strong>{labelCurriculum}:</strong> {String(unitTitle)}
        </div>
      ) : null}
    </>
  )
}
