import { cx } from "class-variance-authority"

import { IconByIconName } from "../Icons/IconByIconName"
import { type Embeds, JsonToHtml, type Node } from "../JsonToHtml/JsonToHtml"
import type { RTENode } from "../JsonToHtml/types/rte/node"
import { getUspIconName, UspIconName } from "./utils"

import styles from "./uspCard.module.css"

interface UspCardProps extends React.HTMLAttributes<HTMLDivElement> {
  iconName?: UspIconName | null
  embeds: Node<Embeds>[]
  nodes: RTENode[]
}

export function UspCard({
  className,
  iconName,
  embeds,
  nodes,
  ...props
}: UspCardProps) {
  const resolvedIconName = getUspIconName(iconName)

  return (
    <div className={cx(styles.uspCard, className)} {...props}>
      <IconByIconName
        className={styles.icon}
        iconName={resolvedIconName}
        color="Icon/Interactive/Accent"
        size={48}
      />
      <JsonToHtml embeds={embeds} nodes={nodes} />
    </div>
  )
}