import { useIntl } from "react-intl"

import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Body from "@/components/TempDesignSystem/Text/Body"

import type { CheckInCheckOutProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import { IconName } from "@/types/components/icon"

export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
  const intl = useIntl()

  return (
    <AccordionItem
      title={intl.formatMessage({ id: "Check-in/Check-out" })}
      icon={IconName.Calendar}
      variant="sidepeek"
    >
      <Body textTransform="bold">{intl.formatMessage({ id: "Hours" })}</Body>
      <Body>{`${intl.formatMessage({ id: "Check in from" })}: ${checkin.checkInTime}`}</Body>
      <Body>{`${intl.formatMessage({ id: "Check out at latest" })}: ${checkin.checkOutTime}`}</Body>
    </AccordionItem>
  )
}
