---
import type { HTMLAttributes } from 'astro/types'
import type { SheetProps } from './sheet'

import Modal from '../Modal/Modal.astro'

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

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

export type Props = SheetProps<HTMLAttributes<'dialog'>>

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

const classes = classNames([
    styles.sheet,
    position && styles[position],
    className
])
---

<Modal
    className={classes}
    {...rest}
>
    <slot />
</Modal>