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