"use client"

import { useState } from "react"
import { useIntl } from "react-intl"

import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"

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

export default function HotelDetailSidePeek() {
  const intl = useIntl()
  const [isOpen, setIsOpen] = useState(false)

  function toggleSidePeek() {
    setIsOpen(!isOpen)
  }

  return (
    <>
      <div className={styles.buttons}>
        <Button
          variant="icon"
          theme="base"
          intent="text"
          wrapping
          onClick={toggleSidePeek}
        >
          {intl.formatMessage({
            id: "See hotel details",
          })}
          <ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
        </Button>
        <Button
          variant="icon"
          theme="base"
          intent="text"
          wrapping
          onClick={toggleSidePeek}
        >
          {intl.formatMessage({
            id: "Show all amenities",
          })}
          <ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
        </Button>
      </div>
      <SidePeek
        contentKey="hotel-detail-side-peek"
        title="Hotel Details"
        isOpen={isOpen}
        handleClose={() => setIsOpen(false)}
      >
        <div>TBD</div>
      </SidePeek>
    </>
  )
}