"use client"

import { useIntl } from "react-intl"

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

import Divider from "@/components/TempDesignSystem/Divider"

import { getGroupedOpeningHours } from "../utils"

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

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

interface AlternateOpeningHoursProps {
  alternateOpeningHours: RestaurantOpeningHours
}

export default function AlternateOpeningHours({
  alternateOpeningHours,
}: AlternateOpeningHoursProps) {
  const intl = useIntl()
  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">
        <p className={styles.caption}>{alternateOpeningHours.name}</p>
      </Typography>
    )
  }

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