web/packages/design-system/lib/components/MessageBanner/index.tsx

import { cva } from 'class-variance-authority'
import styles from './messageBanner.module.css'
import { Typography } from '../Typography'
import { MaterialIcon } from '../Icons/MaterialIcon'

type MessageBannerType = 'default' | 'error' | 'info'
type TextColor = 'default' | 'error'

const textVariants = cva('', {
  variants: {
    textColor: {
      default: styles.textDefault,
      error: styles.textError,
    },
  },
  defaultVariants: {
    textColor: 'default',
  },
})

type MessageBannerProps = {
  type?: MessageBannerType
  textColor?: TextColor
  text: string
}

export function MessageBanner({
  type = 'default',
  textColor = 'default',
  text,
}: MessageBannerProps) {
  const textClass = textVariants({ textColor })

  const iconName = type === 'error' ? 'error' : 'info'
  const iconColor =
    type === 'error'
      ? 'Icon/Feedback/Error'
      : type === 'info'
        ? 'Icon/Feedback/Information'
        : 'Icon/Default'

  return (
    <div className={styles.container}>
      <Typography
        className={textClass}
        variant="Body/Supporting text (caption)/smRegular"
      >
        <span className={styles.content}>
          <MaterialIcon size={20} icon={iconName} color={iconColor} isFilled />
          {text}
        </span>
      </Typography>
    </div>
  )
}