import { h, type FunctionComponent } from 'preact'
import cn from 'classnames'

export default function messageFactory(styles: {
  base?: string
  text?: string
  icon?: string
  button?: string
  noMargin?: string
  normal?: string
  error?: string
  success?: string
}) {
  const Message: FunctionComponent<{
    className?: string
    dismiss?: () => void
    noMargin?: boolean
    type?: 'normal' | 'error' | 'success'
  }> = ({ children, className, dismiss, noMargin, type = 'normal' }) => (
    <div className={cn(styles.base, styles[type], noMargin && styles.noMargin, className)}>
      <i className={styles.icon} />

      <div className={styles.text}>{children}</div>

      {dismiss && (
        <button className={styles.button} onClick={() => dismiss()}>
          X
        </button>
      )}
    </div>
  )

  return Message
}