import { useIntl } from "react-intl"

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

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({
            defaultMessage: "How it works",
          })}
          <MaterialIcon
            icon="keyboard_arrow_down"
            color="Icon/Interactive/Default"
            size={16}
          />
        </summary>
      </Caption>
      <section className={styles.content}>
        <Body>
          {intl.formatMessage({
            defaultMessage:
              "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({
            defaultMessage: "What you have to do to guarantee booking:",
          })}
        </Body>
        <ol>
          <Body asChild>
            <li>
              {intl.formatMessage({
                defaultMessage: "Complete the booking",
              })}
            </li>
          </Body>
          <Body asChild>
            <li>
              {intl.formatMessage({
                defaultMessage: "Provide a payment card in the next step",
              })}
            </li>
          </Body>
        </ol>
        <Body>
          {intl.formatMessage({
            defaultMessage:
              "Please note that this is mandatory, and that your card will only be charged in the event of a no-show.",
          })}
        </Body>
      </section>
    </details>
  )
}
