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

import { getIntl } from "@/i18n"

import SectionWrapper from "../SectionWrapper"

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

import type { HowItWorksProps } from "@/types/components/blocks/dynamicContent"

export default async function HowItWorks({ dynamic_content }: HowItWorksProps) {
  const intl = await getIntl()
  return (
    <SectionWrapper dynamic_content={dynamic_content}>
      <section className={styles.container}>
        <Typography variant="Title/sm" className={styles.title}>
          <h3>
            {intl.formatMessage({
              id: "common.howItWorks",
              defaultMessage: "How it works",
            })}
          </h3>
        </Typography>
      </section>
    </SectionWrapper>
  )
}
