import { HStack, Stack } from "@styled-system/jsx";

import { Button } from "@/components/ui/button";
import DateTimePicker from "./date-time-picker";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { NumberInput } from "@/components/ui/number-input";
import { getI18n } from "@/i18n/server";
import { stack } from "@styled-system/patterns";
import { styled } from "@styled-system/jsx";
import { submitReservationFormAction } from "@/actions/reservation";

export default async function ReservationForm() {
  const t = await getI18n();

  return (
    <styled.form action={submitReservationFormAction} className={stack()}>
      <Field.Root id="name">
        <Field.Label>{t("contact.name")}</Field.Label>
        <Field.Input name="name" placeholder={t("contact.name")} />
      </Field.Root>
      <Field.Root id="email">
        <Field.Label>{t("general.email")}</Field.Label>
        <Field.Input name="email" placeholder={t("general.email")} asChild>
          <Input type="email" />
        </Field.Input>
      </Field.Root>
      <Field.Root id="phoneNumber">
        <Field.Label>{t("general.phoneNumber")}</Field.Label>
        <Field.Input name="phoneNumber" placeholder={t("general.phoneNumber")} />
      </Field.Root>
      <DateTimePicker />
      <Field.Root id="guests">
        <Field.Label>{t("reservation.guests")}</Field.Label>
        <NumberInput name="guests" />
      </Field.Root>
      <Field.Root id="message">
        <Field.Label>{t("contact.message")}</Field.Label>
        <Field.Textarea name="message" placeholder={t("contact.message")} />
      </Field.Root>
      <HStack justify="end">
        <Button type="submit">{t("general.submit")}</Button>
      </HStack>
    </styled.form>
  );
}