import React, { useMemo } from 'react'
import { formatPlanTemplateStructurePreview } from '../../utils/trainingUnitSectionsForm'

export default function PlanTemplateStructurePreview({ sections, compact = false }) {
  const preview = useMemo(() => formatPlanTemplateStructurePreview(sections), [sections])

  if (preview.isEmpty) {
    return (
      <p style={{ margin: 0, fontSize: compact ? '0.82rem' : '0.88rem', color: 'var(--text3)' }}>
        Noch keine Abschnitte definiert.
      </p>
    )
  }

  return (
    <ul
      className="plan-template-structure-preview"
      style={{
        listStyle: 'none',
        margin: compact ? '0.35rem 0 0' : '0.5rem 0 0',
        padding: 0,
        display: 'grid',
        gap: compact ? '0.35rem' : '0.45rem',
      }}
    >
      {preview.lines.map((line, idx) => (
        <li
          key={`${line.kind}-${line.label}-${idx}`}
          style={{
            fontSize: compact ? '0.82rem' : '0.88rem',
            lineHeight: 1.45,
            color: 'var(--text2)',
          }}
        >
          <span
            style={{
              display: 'inline-block',
              fontSize: '0.72rem',
              fontWeight: 700,
              letterSpacing: '0.02em',
              textTransform: 'uppercase',
              color: line.kind === 'parallel' ? 'var(--accent-dark)' : 'var(--text3)',
              marginRight: '0.45rem',
            }}
          >
            {line.label}
          </span>
          <span style={{ color: 'var(--text1)' }}>{line.detail}</span>
        </li>
      ))}
    </ul>
  )
}