"use client";

import { useState } from "react";
import styles from "./stepone.module.css";
import { TextField } from "@shopify/polaris";
import Button from "../../../components/ui/button";

type StepOne = {
  email: string;
  name: string;
};

export default function Stepone({ handleNext }: { handleNext: (data: StepOne) => void }) {
  const [stepOneDetails, setStepOneDetails] = useState<StepOne>({
    email: "",
    name: "",
  });

  const handleInputChange = (value: string, field: keyof StepOne) => {
    setStepOneDetails((prev) => ({ ...prev, [field]: value }));
  };

  const isFormValid = stepOneDetails.email.trim() !== "" && stepOneDetails.name.trim() !== "";

  return (
    <>
      <h1 className={styles.title}>Let's get started</h1>
      <p className={styles.subtitle}>Tell us about your agent</p>

      <div className={styles.formContainer}>
        <div className={styles.formField}>
          <TextField
            label="Email"
            type="email"
            value={stepOneDetails.email}
            onChange={(value) => handleInputChange(value, "email")}
            placeholder="Enter your email"
            autoComplete="email"
          />
        </div>

        <div className={styles.formField}>
          <TextField
            label="Agent Name"
            type="text"
            value={stepOneDetails.name}
            onChange={(value) => handleInputChange(value, "name")}
            placeholder="Enter agent name"
            autoComplete="off"
          />
        </div>
      </div>

      <div className={styles.buttonContainer}>
        <Button btnVariant="primary" onClick={() => handleNext(stepOneDetails)} disabled={!isFormValid}>
          Continue
        </Button>
      </div>
    </>
  );
}