import { useTranslation } from "react-i18next"
import { Button } from "../../../ui-component/button/button.component"
import { Icon } from "../../../ui-component/icon/icon.component"
import { Input } from "../../../ui-component/input/input.component"
import { Textarea } from "../../../ui-component/textarea/textarea.component"
import styles from "./build-team.module.css"

export function BuildAboutProject({
  step,
  onNext,
}: {
  step: number
  onNext: () => void
}) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------
  const { t: translate } = useTranslation()

  // ---------------------------------------------------------------------------
  return (
    <div className={styles.buildAboutProject}>
      {/* --------------------------------------------------------------------------- */}
      {/* TITLE & BACK ICON */}
      {/* --------------------------------------------------------------------------- */}

      <div className={styles.aboutProjectWrap}>
        <h2>About project</h2>
        <div className={styles.titleUnderlineWrap}>
          {[...Array(5)].map((_, index) => (
            <div
              key={index}
              className={styles.titleUnderline}
              style={{
                backgroundColor:
                  index === 3 && step === 4 ? "#5807c9" : "#E9D5FC",
              }}
            />
          ))}
        </div>
      </div>
      <div className={styles.buildAboutContainer}>
        {/* --------------------------------------------------------------------------- */}
        {/* LEFT SIDE */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.buildAboutWrap}>
          <div className={styles.leftSide}>
            <Input
              placeholder="Enter the name of the project"
              value={""}
              onValueChange={() => {}}
            />
            <span className={styles.characters}>max 100 characters</span>
            <div className={styles.textArea}>
              <Textarea
                style={{ width: "100%", height: "100%" }}
                placeholder="Description the project"
                value={""}
                onValueChange={() => {}}
              />
            </div>
            <div className={styles.charactersWrap}>
              <p className={styles.characters}>max 1000 characters</p>
            </div>
          </div>
        </div>

        {/* --------------------------------------------------------------------------- */}
        {/* LINE */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.verticalLine} />

        {/* --------------------------------------------------------------------------- */}
        {/* RIGHT SIDE */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.buildAboutWrap}>
          <div className={styles.rightSide}>
            <Textarea
              style={{ minHeight: "6rem" }}
              placeholder="Description the project"
              value={""}
              onValueChange={() => {}}
            />
            <span className={styles.characters}>max 100 characters</span>
            <Textarea
              style={{ minHeight: "6rem" }}
              placeholder="Description the project"
              value={""}
              onValueChange={() => {}}
            />
            <span className={styles.characters}>max 100 characters</span>
            <Textarea
              style={{ minHeight: "6rem" }}
              placeholder="Description the project"
              value={""}
              onValueChange={() => {}}
            />
            <span className={styles.characters}>max 100 characters</span>

            {/* --------------------------------------------------------------------------- */}
            {/* ADD FUNCTION */}
            {/* --------------------------------------------------------------------------- */}

            <div className={styles.addFunction}>
              <Icon
                name="fa-light fa-plus"
                className={styles.iconPlus}
                size="1.6"
              />
              <span className={styles.addFunctionText}>Add a function</span>
            </div>
          </div>
        </div>
      </div>

      {/* --------------------------------------------------------------------------- */}
      {/* BUTTON */}
      {/* --------------------------------------------------------------------------- */}

      <div className={styles.sendBtn}>
        <Button mode="outline" className={styles.nextBtn} onClick={onNext}>
          {translate("button.next")}
        </Button>
      </div>
    </div>
  )
}
when I click on add function it should generate another  <Textarea
              style={{ minHeight: "6rem" }}
              placeholder="Description the project"
              value={""}
              onValueChange={() => {}}
            />
            <span className={styles.characters}>max 100 characters</span>