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>
  )
}