MarkdownCallout

---
import type { CalloutCanonical } from '../../lib/callouts/resolve-callout-type'
import '../../styles/markdown-callout.css'
import CalloutPhosphorIcon from '../0_atoms/CalloutPhosphorIcon.astro'

interface Props {
  calloutType: CalloutCanonical
  title: string
  foldable: boolean
  open?: boolean
}

const { calloutType, title, foldable, open = false } = Astro.props

const classNames = [
  'markdown-callout',
  `markdown-callout--${calloutType}`,
  ...(foldable ? ['markdown-callout--foldable'] : []),
]
---

{
  foldable ? (
    <details class:list={classNames} open={open || undefined}>
      <summary class="markdown-callout-title">
        <CalloutPhosphorIcon calloutType={calloutType} />
        {title}
      </summary>
      <slot />
    </details>
  ) : (
    <div class:list={classNames} dir="auto">
      <p class="markdown-callout-title">
        <CalloutPhosphorIcon calloutType={calloutType} />
        {title}
      </p>
      <slot />
    </div>
  )
}