web/apps/scandic-web/components/Blocks/Essentials/index.tsx

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

import IconByCSSelect from "@scandic-hotels/design-system/Icons/IconByCSSelect"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

import type { EssentialsBlock } from "@scandic-hotels/trpc/types/campaignPage"

interface EssentialsProps {
  content: EssentialsBlock
}

export default async function Essentials({ content }: EssentialsProps) {
  const { title, preamble, items } = content

  return (
    <section className={styles.essentialsSection}>
      <header className={styles.header}>
        <Typography variant="Title/smLowCase">
          <h3 className={styles.heading}>{title}</h3>
        </Typography>
        {preamble ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{preamble}</p>
          </Typography>
        ) : null}
      </header>
      <ul className={cx(styles.list, styles[`count${items.length}`])}>
        {items.map((item) => (
          <li
            key={`${item.label}-${item.icon_identifier}`}
            className={styles.listItem}
          >
            <IconByCSSelect identifier={item.icon_identifier} size={42} />

            <div className={styles.text}>
              <Typography variant="Title/Overline/sm">
                <span>{item.label}</span>
              </Typography>
              {item.description ? (
                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <span>{item.description}</span>
                </Typography>
              ) : null}
            </div>
          </li>
        ))}
      </ul>
    </section>
  )
}