web/packages/design-system/lib/components/OpeningHours/AlternateOpeningHours/index.tsx

'use client'

import { useIntl } from 'react-intl'

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

import { getGroupedOpeningHours } from '../utils'

import styles from '../openingHours.module.css'
import type { AlternateOpeningHours } from '../openingHoursTypes'

interface AlternateOpeningHoursProps {
  alternateOpeningHours: AlternateOpeningHours
}

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 />
      <Typography variant="Body/Paragraph/mdBold">
        <h5 className={styles.heading}>
          {intl.formatMessage(
            {
              id: 'openingHours.alternateOpeningHours',
              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>
    </>
  )
}