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

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

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

const items = block.ListItems ?? []
const listTypes = ['disc', 'circle', 'square']
---

<ul class={`list-${listTypes[level % listTypes.length]}`}>
  {
    items
      .filter(
        (b: interfaces.Block) => b.Type === 'bulleted_list_item' && b.BulletedListItem,
      )
      .map((b: interfaces.Block) => {
        const item = b.BulletedListItem
        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>
        )
      })
  }
</ul>

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