"use client"

import { useIntl } from "react-intl"

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

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

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

import type { CheckInCheckOutAccordionItemProps } from "@/types/components/sidePeeks/amenities"

export default function CheckInCheckOutAccordionItem({
  checkInData,
}: CheckInCheckOutAccordionItemProps) {
  const intl = useIntl()

  const { checkInTime, checkOutTime } = checkInData

  return (
    <AccordionItem
      title={intl.formatMessage({ defaultMessage: "Check-in/Check-out" })}
      iconName={IconName.Business}
      variant="sidepeek"
      className={styles.accordionItem}
      trackingId="amenities:check-in"
    >
      <div className={styles.checkInCheckOutContent}>
        <Typography variant="Title/Overline/sm">
          <h4 className={styles.subheading}>
            {intl.formatMessage({ defaultMessage: "Hours" })}
          </h4>
        </Typography>
        <Divider color="Border/Divider/Default" />
        <Typography variant="Body/Paragraph/mdRegular">
          <div>
            <p>
              {intl.formatMessage(
                { defaultMessage: "Check in from: {checkInTime}" },
                {
                  checkInTime,
                }
              )}
            </p>
            <p>
              {intl.formatMessage(
                { defaultMessage: "Check out at latest: {checkOutTime}" },
                {
                  checkOutTime,
                }
              )}
            </p>
          </div>
        </Typography>
      </div>
    </AccordionItem>
  )
}
