import { useIntl } from "react-intl"

import ChevronDown from "@/components/Icons/ChevronDown"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

export default function GuaranteeDetails() {
  const intl = useIntl()
  return (
    <details>
      <Caption color="burgundy" type="bold" asChild>
        <summary className={styles.summary}>
          {intl.formatMessage({ id: "How it works" })}
          <ChevronDown color="burgundy" height={16} />
        </summary>
      </Caption>
      <section className={styles.content}>
        <Body>
          {intl.formatMessage({
            id: "When guaranteeing your booking, we will hold the booking until 07:00 until the day after check-in. This will provide you as a guest with added flexibility for check-in times.",
          })}
        </Body>
        <Body>
          {intl.formatMessage({
            id: "What you have to do to guarantee booking:",
          })}
        </Body>
        <ol>
          <Body asChild>
            <li>{intl.formatMessage({ id: "Complete the booking" })}</li>
          </Body>
          <Body asChild>
            <li>
              {intl.formatMessage({
                id: "Provide a payment card in the next step",
              })}
            </li>
          </Body>
        </ol>
        <Body>
          {intl.formatMessage({
            id: "Please note that this is mandatory, and that your card will only be charged in the event of a no-show.",
          })}
        </Body>
      </section>
    </details>
  )
}
