import { useTranslation } from "react-i18next"
import { Button } from "../../../ui-component/button/button.component"
import { DropdownItems } from "../../../ui-component/dropdown/dropdown.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
  // ---------------------------------------------------------------------------

  // ---------------------------------------------------------------------------
  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.biuldAboutContainer}>
        <div className={styles.biuldAboutWrap}>
          <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>
            <p className={styles.characters}>max 100 characters</p>
          </div>
        </div>
        <div className={styles.verticalLine} />
        <div className={styles.biuldAboutWrap}>
          <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>
          </div>
        </div>
      </div>
      <Button className={styles.sendBtn}>Choose this team</Button>
    </div>
  )
}
why class biuldAboutWrap not inheriting height from class biuldAboutContainer