import React, { useState } from 'react'
import type { BannerProps } from './banner'

import Button from '../Button/Button.tsx'

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

import closeIcon from '../../icons/close.svg?raw'

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

export type Props = BannerProps & {
    children: React.ReactNode
}

const Banner = ({
    top,
    bottom,
    closeable,
    padded,
    sticky = true,
    className,
    children
}: Props) => {
    const [visible, setVisible] = useState(true)

    const classes = classNames([
        styles.banner,
        bottom && styles.bottom,
        padded && styles.padded,
        !sticky && styles.relative,
        className
    ])

    const style = top
        ? { '--w-banner-top': `${top}px` } as React.CSSProperties
        : undefined

    if (!visible) {
        return null
    }

    return (
        <div className={classes} style={style}>
            {children}
            {closeable && (
                <Button
                    theme="flat"
                    className={styles.close}
                    dangerouslySetInnerHTML={{ __html: closeIcon }}
                    onClick={() => setVisible(false)}
                    aria-label="close"
                />
            )}
        </div>
    )
}

export default Banner