/* 
  This is the password validations component.
  It contains the following components:
  - PasswordValidations
*/
import React from "react";
import { STRENGTH_LEVELS } from "@/src/utils/commonVariables";

const PasswordValidations = ({
  styles,
  activeCount,
  strengthClass,
}: {
  styles: any;
  activeCount: number;
  strengthClass: string;
}) => {
  return (
    <div className={`grid gap-2`}>
      <div
        className={`${styles.PasswordStrength} ${styles[strengthClass]} grid grid-cols-3 gap-[10px] my-1`}
      >
        <span
          className={`${
            activeCount >= 1 ? styles.active : ""
          } h-[6px] w-full flex`}
        ></span>
        <span
          className={`${
            activeCount >= 2 ? styles.active : ""
          } h-[6px] w-full flex`}
        ></span>
        <span
          className={`${
            activeCount >= 3 ? styles.active : ""
          } h-[6px] w-full flex`}
        ></span>
      </div>
      <p
        className="fs-14"
        style={{
          color: STRENGTH_LEVELS[activeCount - 1]?.color || "black",
        }}
      >
        Password strength:{" "}
        <span>{STRENGTH_LEVELS[activeCount - 1]?.text || ""}</span>
      </p>
    </div>
  );
};

export default PasswordValidations;