49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
"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 "@/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>
|
|
)
|
|
}
|