"use client"

import { useIntl } from "react-intl"

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

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

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

import type { RestaurantOpeningHours } from "@scandic-hotels/trpc/types/hotel"

interface OpeningHoursProps {
  openingHours: RestaurantOpeningHours
  alternateOpeningHours?: RestaurantOpeningHours
  heading?: string
}

export default function OpeningHours({
  openingHours,
  alternateOpeningHours,
  heading,
}: OpeningHoursProps) {
  const intl = useIntl()
  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 />

      <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>
  )
}