import styles from '../styles/input.module.scss';
import { parseClassName } from '../utils/utils.js';
import {AiFillEye, AiFillEyeInvisible} from 'react-icons/ai'
import { useState } from 'react';
export default function Input(props) {
  const id = Math.random()
  const [type, setType] = useState(props.type ||'text')
  return (
    <span
      className={parseClassName([
        styles["input-container"],
        props.error ? styles["error"] : undefined,
      ])}
    >
      <input
        {...props}
        id={`input_${id}`}
        className={styles.input}
        required
        placeholder=""
        type={type}
      />
      {props.type == "password" &&
        (type != "password" ? (
          <AiFillEye
            onClick={() => {
              setType("password");
            }}
            className={styles["password-toggler"]}
          />
        ) : (
          <AiFillEyeInvisible
            onClick={() => {
              setType("text");
            }}
            className={styles["password-toggler"]}
          />
        ))}
      <label className={styles.label} htmlFor={`input_${id}`}>
        {props.placeholder}
      </label>
      <span className={styles.bar}></span>
    </span>
  );
}