"use client"

import { useIntl } from "react-intl"

import { Divider } from "../Divider"
import { Typography } from "../Typography"

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

import styles from "./openingHours.module.css"
import type {
  OpeningHours,
  AlternateOpeningHours as AlternateOpeningHoursType,
} from "./openingHoursTypes"

interface OpeningHoursProps {
  openingHours: OpeningHours
  alternateOpeningHours?: AlternateOpeningHoursType
  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 ?? getTranslatedName(openingHours.nameEnglish, intl)}
        </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>
  )
}