---
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
  headings: interfaces.Block[]
}

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

if (!block.Callout) {
  return null
}

const callout = block.Callout
---

<div class={`callout ${snakeToKebab(callout.Color)}`}>
  {
    callout.Icon && (
      <div class="icon">
        {callout.Icon.Type === 'emoji' ? (
          callout.Icon.Emoji
        ) : callout.Icon.Type === 'external' ? (
          <img src={callout.Icon.Url} alt="Icon in a callout block" />
        ) : null}
      </div>
    )
  }
  <div>
    {
      callout.RichTexts.map((richText: interfaces.RichText) => (
        <RichText richText={richText} />
      ))
    }
    {
      callout.Children && (
        <NotionBlocks blocks={callout.Children} headings={headings} />
      )
    }
  </div>
</div>

<style>
  .callout {
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    margin: 0.4rem auto;
    padding: 16px 12px;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6rem;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--notion-border);
    background: var(--notion-surface);
  }
  .callout > div {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    line-height: 1.5rem;
  }
  .callout > div.icon {
    margin-right: 0.7rem;
  }
  .callout > div.icon > img {
    width: 1.2rem;
    height: 1.2rem;
  }
</style>