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

type EventDividerProps = {
  className?: string
  graphicSrc?: string | null
  graphicType?: 'icon' | 'avatar'
  iconName?: string
  iconSize?: '8' | '16' | '32'
  iconClassName?: string
  dividerType: string
  title?: string
  description?: string
}

const EventDivider: FC<EventDividerProps> = ({
  children,
  className: providedClassName,
  graphicSrc,
  graphicType = 'icon',
  iconName,
  iconSize,
  iconClassName,
  dividerType,
  title,
  description,
}) => {
  const hasGraphic = Boolean(iconName || graphicSrc)

  return (
    <div
      className={className(
        'divider',
        dividerType && `divider--type-${dividerType}`,
        providedClassName,
      )}
    >
      {hasGraphic && (
        <span className={className('divider__graphic')}>
          {iconName ? (
            <Icon
              name={iconName}
              size={iconSize}
              className={iconClassName}
              alt=""
            />
          ) : (
            <img
              src={graphicSrc || undefined}
              className={className(
                {
                  icon: graphicType === 'icon',
                  avatar: graphicType === 'avatar',
                },
                iconClassName,
              )}
            />
          )}
        </span>
      )}

      <div className={className('divider__body')}>
        {title ? (
          <h2
            className={className('divider__title')}
            dangerouslySetInnerHTML={{
              __html: title,
            }}
          />
        ) : null}
        {description ? (
          <p
            className={className('divider__description')}
            dangerouslySetInnerHTML={{
              __html: description,
            }}
          />
        ) : null}
        {children}
      </div>
    </div>
  )
}

export default EventDivider