---
import * as interfaces from '../../lib/interfaces.ts'
import { snakeToKebab } from '../../lib/style-helpers.ts'
import '../../styles/notion-color.css'
import NotionBlocks from '../NotionBlocks.astro'
import RichText from './RichText.astro'

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

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

const listTypes = ['i', '1', 'a'] as const
const items = block.ListItems ?? []
---

<ol type={listTypes[level % listTypes.length]}>
  {
    items
      .filter(
        (b: interfaces.Block) =>
          b.Type === 'numbered_list_item' && b.NumberedListItem,
      )
      .map((b: interfaces.Block) => {
        const item = b.NumberedListItem
        if (!item) return null
        return (
          <li class={snakeToKebab(item.Color)}>
            {item.RichTexts.map((richText: interfaces.RichText) => (
              <RichText richText={richText} />
            ))}
            {item.Children && item.Children.length > 0 && (
              <NotionBlocks
                blocks={item.Children}
                level={level + 1}
                headings={headings}
              />
            )}
          </li>
        )
      })
  }
</ol>

<style>
  ol {
    font-size: 1rem;
  }
</style>
