web/apps/scandic-web/components/OpeningHours/index.tsx

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

import { getIntl } from "@/i18n"

import AlternateOpeningHours from "./AlternateOpeningHours"
import { getGroupedOpeningHours } from "./utils"

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

import type { OpeningHoursProps } from "@/types/components/hotelPage/sidepeek/openingHours"

export default async function OpeningHours({
  openingHours,
  alternateOpeningHours,
  heading,
  type = "default",
}: OpeningHoursProps) {
  const intl = await getIntl()

  const groupedOpeningHours = getGroupedOpeningHours(openingHours, intl)

  return (
    <div className={type === "default" ? styles.wrapper : ""}>
      <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
        <h5>{heading ?? openingHours.name}</h5>
      </Typography>
      {groupedOpeningHours.map((groupedOpeningHour) => {
        return (
          <Typography
            variant="Body/Paragraph/mdRegular"
            className={styles.text}
            key={groupedOpeningHour}
          >
            <p>{groupedOpeningHour}</p>
          </Typography>
        )
      })}
      {alternateOpeningHours ? (
        <AlternateOpeningHours alternateOpeningHours={alternateOpeningHours} />
      ) : null}
    </div>
  )
}