"use client"
import {ErrorMessage, Form, FormikProps} from "formik";
import React from "react";
import {ResetPasswordFormValues} from "./ResetPasswordForm";
import {Field, FieldGroup, FieldLabel} from "@/components/ui/field";
import {Input} from "@/components/ui/input";
import {Button} from "@/components/ui/button";

export default function InnerResetPasswordForm(
  props: FormikProps<ResetPasswordFormValues>
) {
  const isValid = Boolean(
    props.values.username.trim() && props.values.email.trim()
  );
  return (
    <Form className="border-[1px] border-neutral-200 overflow-hidden" dir="rtl">
      <div className="p-4">
        <FieldGroup dir="rtl">
          <Field>
            <FieldLabel htmlFor="checkout-7j9-card-name-43j">
              نام کاربری
            </FieldLabel>
            <Input
              id="checkout-7j9-card-name-43j"
              placeholder="نام کاربری"
              name="username"
              onChange={(e) => props.setFieldValue("username", e.target.value)}
            />
            <ErrorMessage
              className="text-xs text-red-500"
              component={"div"}
              name="username"
            />
          </Field>
          <Field>
            <FieldLabel htmlFor="checkout-7j9-card-name-44j">ایمیل</FieldLabel>
            <Input
              id="checkout-7j9-card-name-44j"
              placeholder="ایمیل"
              name="email"
              onChange={(e) => props.setFieldValue("email", e.target.value)}
            />
            <ErrorMessage
              className="text-xs text-red-500"
              component={"div"}
              name="email"
            />
          </Field>

          <Button variant={"default"} disabled={!isValid} type="submit">
            ارسال لینک
          </Button>
        </FieldGroup>
      </div>
    </Form>
  );
}
