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

import { getIntl } from "@/i18n"

import { getGroupedOpeningHours } from "../utils"

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

import type { RestaurantOpeningHours } from "@/types/hotel"

interface AlternateOpeningHoursProps {
  alternateOpeningHours: RestaurantOpeningHours
}

export default async function AlternateOpeningHours({
  alternateOpeningHours,
}: AlternateOpeningHoursProps) {
  const intl = await getIntl()
  const groupedAlternateOpeningHours = alternateOpeningHours
    ? getGroupedOpeningHours(alternateOpeningHours, intl)
    : null

  // If there are alternate hours but no grouped hours with length, we return the name of the alternate hours
  if (!groupedAlternateOpeningHours?.length) {
    return (
      <Typography
        variant="Body/Supporting text (caption)/smRegular"
        className={styles.caption}
      >
        <p>{alternateOpeningHours.name}</p>
      </Typography>
    )
  }

  return (
    <>
      <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
        <h5>
          {intl.formatMessage(
            { id: "Alternate opening hours ({name})" },
            { name: alternateOpeningHours.name }
          )}
        </h5>
      </Typography>
      {groupedAlternateOpeningHours.map((groupedOpeningHour) => (
        <Typography
          variant="Body/Paragraph/mdRegular"
          className={styles.text}
          key={groupedOpeningHour}
        >
          <p>{groupedOpeningHour}</p>
        </Typography>
      ))}
    </>
  )
}
