import { cva } from "class-variance-authority"
import { IconByIconName } from "../Icons/IconByIconName"
import { IconName } from "../Icons/iconName"
import { Typography } from "../Typography"
import styles from "./InfoBox.module.css"
import type { VariantProps } from "class-variance-authority"

const infoBoxVariants = cva(styles.infoBox, {
  variants: {
    theme: {
      "SAS-Blue": styles.sasBlue,
      Default: styles.default,
    },
  },
  defaultVariants: {
    theme: "Default",
  },
})

const iconVariants = cva(styles.iconContainer, {
  variants: {
    theme: {
      "SAS-Blue": styles.sasBlue,
      Default: styles.default,
    },
  },
  defaultVariants: {
    theme: "Default",
  },
})

export type Props = {
  heading: string
  text: string
  theme?: VariantProps<typeof infoBoxVariants>["theme"]
  icon?: IconName
}

export function InfoBox({ heading, text, theme, icon }: Props) {
  return (
    <article className={infoBoxVariants({ theme })}>
      {icon && (
        <div className={iconVariants({ theme })}>
          <IconByIconName iconName={icon} color="CurrentColor" />
        </div>
      )}
      <div className={styles.content}>
        <Typography variant="Body/Paragraph/mdBold">
          <h2>{heading}</h2>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>{text}</p>
        </Typography>
      </div>
    </article>
  )
}