export function ContentStack({ panel1, panel1b, panel2, panel3 }) {
  return (
    <div className="content-stack" aria-label="Contenu principal">
      {panel1 != null ? (
        <section
          className={[
            'content-stack__panel',
            panel1 ? 'content-stack__panel--padded' : null,
          ]
            .filter(Boolean)
            .join(' ')}
          aria-label="Bloc 1"
        >
          {panel1}
        </section>
      ) : null}
      {panel1b != null ? (
        <section
          className={[
            'content-stack__panel',
            'content-stack__panel--padded',
          ].join(' ')}
          aria-label="Bloc 2"
        >
          {panel1b}
        </section>
      ) : null}
      {panel2 != null ? (
        <section
          className={[
            'content-stack__panel',
            panel2 ? 'content-stack__panel--padded' : null,
          ]
            .filter(Boolean)
            .join(' ')}
          aria-label={
            panel3 != null || panel1b != null ? 'Bloc 3' : 'Bloc 2'
          }
        >
          {panel2}
        </section>
      ) : null}
      {panel3 != null ? (
        <section
          className={[
            'content-stack__panel',
            'content-stack__panel--padded',
          ].join(' ')}
          aria-label="Bloc 4"
        >
          {panel3}
        </section>
      ) : null}
    </div>
  )
}
