---
import * as interfaces from '../../lib/interfaces.ts'
import NotionBlocks from '../NotionBlocks.astro'

export interface Props {
  block: interfaces.Block
  headings: interfaces.Block[]
}

const { block, headings }: Props = Astro.props

if (!block.ColumnList) {
  return null
}
---

<div class="column-list">
  {
    block.ColumnList.Columns.map((column: interfaces.Column) => (
      <div>
        <NotionBlocks blocks={column.Children} headings={headings} />
      </div>
    ))
  }
</div>

<style>
  .column-list {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin: 1rem auto;
    gap: 0 1rem;
  }
  .column-list > div {
    flex: 1 1 180px;
    min-width: 0;
    width: 180px;
  }
  @media (max-width: 640px) {
    .column-list {
      display: block;
    }
    .column-list > div {
      min-width: 0;
      width: 100%;
    }
  }
</style>
