---
import type { HTMLAttributes } from 'astro/types'
import type { ToastProps } from './toast'

import Alert from '../Alert/Alert.astro'

import { classNames } from '../../utils/classNames'

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

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

const {
    position,
    className,
    ...rest
} = Astro.props

const classes = classNames([
    styles.toast,
    className
])

const additionalProps = {
    ...(position && { 'data-position': position }),
    titleProps: {
        'data-id': 'title'
    },
    bodyProps: {
        'data-id': 'body'
    }
}
---

{Astro.slots.has('icon') ? (
    <Alert {...rest} className={classes} {...additionalProps}>
        <slot slot="icon" name="icon" />
        <slot />
    </Alert>
) : (
    <Alert {...rest} className={classes} {...additionalProps}>
        <slot />
    </Alert>
)}