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