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

import { getIntl } from "@/i18n"

import Divider from "../TempDesignSystem/Divider"
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,
}: OpeningHoursProps) {
  const intl = await getIntl()
  const groupedOpeningHours = getGroupedOpeningHours(openingHours, intl)

  return (
    <div className={styles.wrapper}>
      <Typography variant="Title/Overline/sm">
        <h5 className={styles.heading}>{heading ?? openingHours.name}</h5>
      </Typography>
      <Divider color="Border/Divider/Default" />

      <Typography variant="Body/Paragraph/mdRegular">
        <div className={styles.text}>
          {groupedOpeningHours.map((groupedOpeningHour) => (
            <p key={groupedOpeningHour}>{groupedOpeningHour}</p>
          ))}
        </div>
      </Typography>
      {alternateOpeningHours ? (
        <AlternateOpeningHours alternateOpeningHours={alternateOpeningHours} />
      ) : null}
    </div>
  )
}