"use client"

import { useIntl } from "react-intl"

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

import { isDefined } from "@/server/utils"

import { IconName } from "@/components/Icons/iconName"
import OpeningHours from "@/components/OpeningHours"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"

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

import type { BreakfastAccordionItemProps } from "@/types/components/sidePeeks/amenities"
import { HotelTypeEnum } from "@/types/enums/hotelType"

export default function BreakfastAccordionItem({
  restaurants,
  hotelType,
}: BreakfastAccordionItemProps) {
  const intl = useIntl()

  const openingHours = restaurants
    ?.map((restaurant) => {
      const breakfastDetail = restaurant.openingDetails.find(
        (details) =>
          details.openingHours.name === "Breakfast" ||
          details.openingHours.name ===
            intl.formatMessage({ defaultMessage: "Breakfast" })
      )
      return breakfastDetail
    })
    .filter(isDefined)[0]

  if (!openingHours && hotelType !== HotelTypeEnum.ScandicGo) {
    return null
  }

  return (
    <AccordionItem
      title={intl.formatMessage({ defaultMessage: "Breakfast" })}
      iconName={IconName.CoffeeAlt}
      variant="sidepeek"
      className={styles.accordionItem}
      trackingId="amenities:breakfast"
    >
      {openingHours ? (
        <OpeningHours
          openingHours={openingHours.openingHours}
          alternateOpeningHours={openingHours.alternateOpeningHours}
          heading={intl.formatMessage({ defaultMessage: "Opening hours" })}
        />
      ) : (
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{intl.formatMessage({ defaultMessage: "All-day breakfast" })}</p>
        </Typography>
      )}
    </AccordionItem>
  )
}
