import { mdiClose } from '@mdi/js'
import React, { ReactNode, useState } from 'react'
import { ColorKey } from '../interfaces'
import { colorsBgLight, colorsOutline } from '../colors'
import BaseButton from './BaseButton'
import BaseIcon from './BaseIcon'

type Props = {
  color: ColorKey
  icon?: string
  outline?: boolean
  children: ReactNode
  button?: ReactNode
}

const NotificationBar = ({ outline = false, children, ...props }: Props) => {
  const componentColorClass = outline ? colorsOutline[props.color] : colorsBgLight[props.color]

  const [isDismissed, setIsDismissed] = useState(false)

  const dismiss = (e: React.MouseEvent) => {
    e.preventDefault()

    setIsDismissed(true)
  }

  if (isDismissed) {
    return null
  }

  return (
    <div
      className={`px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded-lg transition-colors duration-150 ${componentColorClass}`}
    >
      <div className="flex flex-col md:flex-row items-center justify-between">
        <div className="flex flex-col md:flex-row items-center mb-6 md:mb-0">
          {props.icon && (
            <BaseIcon
              path={props.icon}
              w="w-10 md:w-5"
              h="h-10 md:h-5"
              size="24"
              className="md:mr-2"
            />
          )}
          <span className="text-center md:text-left md:py-2">{children}</span>
        </div>
        {props.button}
        {!props.button && (
          <BaseButton icon={mdiClose} color="white" onClick={dismiss} small roundedFull />
        )}
      </div>
    </div>
  )
}

export default NotificationBar