---
import type { HTMLAttributes } from 'astro/types'
import type { AlertProps } from './alert'

import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'

import alert from '../../icons/alert.svg?raw'
import success from '../../icons/circle-check.svg?raw'
import info from '../../icons/info.svg?raw'
import warning from '../../icons/warning.svg?raw'

import styles from './alert.module.scss'

export type Props = AlertProps<HTMLAttributes<'section'>>

const iconMap = {
    info,
    success,
    warning,
    alert
}

const {
    element = 'section',
    title,
    titleTag = 'strong',
    titleProps,
    bodyProps,
    className,
    theme,
    ...rest
} = Astro.props

const Component = element
const Title = titleTag
const hasCustomIcon = Astro.slots.has('icon')

const classes = [
    styles['w-alert'],
    (!hasCustomIcon && !theme) && styles.col,
    theme && styles[theme],
    className
].filter(Boolean).join(' ')

const props = {
    class: classes
}
---

<Component {...props} {...rest}>
    <slot name="icon" />

    {!hasCustomIcon && theme && <Fragment set:html={iconMap[theme]} />}

    <ConditionalWrapper condition={!!(hasCustomIcon || theme)}>
        <div class={styles.wrapper} slot="wrapper">
            children
        </div>
        {title && (
            <Title class:list={styles.title} {...titleProps}>
                {title}
            </Title>
        )}
        <div class={styles.body} {...bodyProps}>
            <slot />
        </div>
    </ConditionalWrapper>
</Component>