---
import Icon from './Icon.astro'
import ButtonList from './ButtonList.astro'

interface Props {
  type?: string
  icon?: string
  important?: boolean
  minor?: boolean
  showClose?: boolean
  avatar?: boolean
  class?: string
  title?: string
  description?: string
  list?: string[]
  action?: string
  link?: string
  buttons?: boolean
}

const { type = 'success', icon: iconProp, important, minor, showClose, avatar, class: className, title = 'This is a custom alert box!', description, list, action, link, buttons } = Astro.props

const defaultIcons: Record<string, string> = {
  success: 'check',
  warning: 'alert-triangle',
  danger: 'alert-circle',
  info: 'info-circle',
}
const icon = iconProp ?? defaultIcons[type]

const classes = ['alert', important ? 'alert-important' : minor ? 'alert-minor' : undefined, `alert-${type}`, showClose && 'alert-dismissible', avatar && 'alert-avatar', className]
---

<div class:list={classes} role="alert">
  <div class="alert-icon">{icon && <Icon name={icon} class="alert-icon" />}</div>
  {
    description || list ? (
      <div>
        {/* set:html preserves entities like &hellip; in the title */}
        <h4 class="alert-heading" set:html={title} />
        <div class="alert-description">
          <Fragment set:html={description ?? ''} />
          {list && list.length > 0 && (
            <ul class="alert-list">
              {list.map((item) => (
                <li>{item}</li>
              ))}
            </ul>
          )}
        </div>
      </div>
    ) : (
      <Fragment>
        <Fragment set:html={title} />
        {/* prettier-ignore — anchor on one line (whitespace ends up in the code panel) */}
        {action ? (
          <a href="#" class="alert-action">
            {action}
          </a>
        ) : link ? (
          <a href="#" class="alert-link">
            {link}
          </a>
        ) : null}
      </Fragment>
    )
  }
  {
    buttons && (
      <ButtonList>
        <a href="#" class={`btn btn-${type}`}>
          Okay
        </a>
        <a href="#" class="btn">
          Cancel
        </a>
      </ButtonList>
    )
  }
  {showClose && <a class="btn-close" data-bs-dismiss="alert" aria-label="close" />}
</div>