import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
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)
  const Icon = iconName ? getIconByIconName(iconName) : null
  return Icon ? <Icon color="red" /> : 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>
  )
}