import { IconByIconName } from "@/components/Icons/IconByIconName"
import JsonToHtml from "@/components/JsonToHtml"

import { renderOptions } from "./renderOptions"
import { getUspIconName } from "./utils"

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

import type { UspGridProps, UspIcon } from "@/types/components/blocks/uspGrid"

function UspIcon({ icon }: { icon: UspIcon }) {
  const iconName = getUspIconName(icon)
  return iconName ? (
    <IconByIconName iconName={iconName} color="Icon/Interactive/Accent" />
  ) : null
}

export default function UspGrid({ usp_grid }: UspGridProps) {
  return (
    <div className={styles.grid}>
      {usp_grid.usp_card.map(
        (usp) =>
          usp.text.json && (
            <div key={usp.text.json.uid} className={styles.usp}>
              <UspIcon icon={usp.icon} />
              <JsonToHtml
                embeds={usp.text.embedded_itemsConnection?.edges}
                nodes={usp.text.json.children}
                renderOptions={renderOptions}
              />
            </div>
          )
      )}
    </div>
  )
}