import { useState } from "react"
import { Button } from "../../ui-component/button/button.component"
import { Checkbox } from "../../ui-component/checkbox/checkbox.component"
import styles from "./user-sign-up.styles.module.css"
import { Input } from "../../ui-component/input/input.component"
import { UserSignUpCompany } from "./user-sign-up-company.component"

export function UserSignUpComponent() {
  // ---------------------------------------------------------------------------
  // states
  // ---------------------------------------------------------------------------
  const [mode, setMode] = useState<
    "initial" | "Company" | "Private Person" | "Engineer"
  >("initial")

  const [selectedStatus, setSelectedStatus] = useState<string>("")

  // ---------------------------------------------------------------------------
  // effects
  // ---------------------------------------------------------------------------

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  const handleStatusChange = (status: string) => {
    setSelectedStatus(status)
  }

  // ---------------------------------------------------------------------------
  return (
    <div className={styles.registrationForm}>
      <div className={styles.titleContainer}>
        <h1 className={styles.title}>Registration</h1>
        <div className={styles.titleUnderlineWrap}>
          {[...Array(5)].map((_, index) => (
            <div key={index} className={styles.titleUnderline}></div>
          ))}
        </div>
      </div>
      {/* --------------------------------------------------------------------------- */}
      {/* CHOOSE ITEMS */}
      {/* --------------------------------------------------------------------------- */}
      {mode === "initial" && (
        <>
          <p className={styles.instructions}>Choose your status</p>
          <div className={styles.statusOptions}>
            {["Company", "Private Person", "Engineer"].map((status, index) => (
              <div
                key={index}
                className={styles.contentCard}
                onClick={() => handleStatusChange(status)}
                style={
                  selectedStatus === status
                    ? { border: "0.5px solid #07c96c" }
                    : undefined
                }
              >
                <Checkbox
                  className={styles.checkbox}
                  mode="radio-button"
                  color="#07C96C"
                  size={14}
                  checked={selectedStatus === status}
                />
                <div className={styles.contentSubWrap}>
                  <img
                    src={"../../../public/icons/browser.svg"}
                    width={40}
                    height={40}
                  />
                  <div className={styles.contentTitle}>{status}</div>
                </div>
              </div>
            ))}
          </div>
          <Button
            className={styles.nextButton}
            onClick={() => {
              if (selectedStatus === "Company") {
                setMode("Company")
              } else if (selectedStatus === "Engineer") {
                setMode("Engineer")
              }
            }}
          >
            Next
          </Button>
        </>
      )}
      {mode === "Company" && <UserSignUpCompany />}
      {mode === "Engineer" && <UserSignUpCompany />}
    </div>
  )
}
the issue here   onClick={() => {
              if (selectedStatus === "Company") {
                setMode("Company")
              } else if (selectedStatus === "Engineer") {
                setMode("Engineer")
              }
            }}, why everytime working condition selectedStatus === "Company" even I select Engineer the condition selectedStatus === "Company" is working if I select anyone. I want it works when I select Company, if I select Engineer works condition selectedStatus === "Engineer". How to fix it ?