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

import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { getI18n } from "@/i18n/server";
import { stack } from "@styled-system/patterns";
import { submitContactFormAction } from "@/actions/contact";

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

  return (
    <styled.form action={submitContactFormAction} 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="subject">
        <Field.Label>{t("contact.subject")}</Field.Label>
        <Field.Input name="subject" placeholder={t("contact.subject")} />
      </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>
  );
}