import { className } from 'lib/css'
import { FC } from 'preact/compat'
import Icon from 'ui/components/layout/icon'
import { useGeneratedId } from 'ui/hooks/utility-hooks'

type ChatStatusProps = {
  handleClose: () => void
  title?: string
  closeButtonText?: string
  srCloseButtonText?: string
  id: string
}

const ChatStatus: FC<ChatStatusProps> = ({
  children,
  handleClose,
  title,
  closeButtonText,
  srCloseButtonText,
  id,
}) => {
  const headingId = useGeneratedId()

  return (
    <section
      tabIndex={-1}
      id={id}
      aria-labelledby={title ? headingId : undefined}
      className={className(
        'chat-status',
        !title ? 'chat-status--condensed' : undefined,
      )}
    >
      <div className={className('chat-status__body')}>
        {title ? (
          <h2 className={className('chat-status__title')} id={headingId}>
            {title}
          </h2>
        ) : null}
        {children}
      </div>
      {typeof handleClose === 'function' && (
        <button
          type="button"
          onClick={handleClose}
          className={className(
            'button',
            'button--tertiary',
            'chat-status__close',
          )}
        >
          {closeButtonText || <Icon name="close" size="16" alt="" />}
          {srCloseButtonText && (
            <span className={className('visually-hidden')}>
              {srCloseButtonText}
            </span>
          )}
        </button>
      )}
    </section>
  )
}

export default ChatStatus