import { useIntl } from "react-intl"

import Input from "@/components/TempDesignSystem/Form/Input"
import Select from "@/components/TempDesignSystem/Form/Select"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import type { DeliveryMethodStepProps } from "@/types/components/myPages/myStay/ancillaries"

export default function DeliveryMethodStep({
  deliveryTimeOptions,
}: DeliveryMethodStepProps) {
  const intl = useIntl()

  return (
    <div className={styles.selectContainer}>
      <div className={styles.select}>
        <Subtitle type="two">
          {intl.formatMessage({ id: "Delivered at:" })}
        </Subtitle>
        <Select
          name="deliveryTime"
          label={""}
          items={deliveryTimeOptions}
          registerOptions={{ required: true }}
          isNestedInModal
        />
        <Body>
          {intl.formatMessage({
            id: "All add-ons are delivered at the same time. Changes to delivery times will affect earlier add-ons.",
          })}
        </Body>
      </div>
      <div className={styles.select}>
        <Input
          label={intl.formatMessage({ id: "Other Requests" })}
          name="optionalText"
        />
        <Caption>
          {intl.formatMessage({
            id: "Optional",
          })}
        </Caption>
      </div>
    </div>
  )
}
