"use client";
import Image from "next/image";
import styles from "./Input.module.css";
import img from "../../../../public/imgaes/clear-icon.svg";

type InputProps = {
  label?: string;
  error?: boolean;
  onClear?: () => void;
} & React.InputHTMLAttributes<HTMLInputElement>;

export default function Input({
  label,
  onClear,
  value,
  error,
  ...props
}: InputProps) {
  return (
    <>
      {label && <div className={styles.label}>{label}</div>}
      <div className={`${styles.inputWrapper} ${error ? styles.error : ""}`}>
        <div
          className={`${styles.svgWrapper} 
          ${value != "" ? styles.disabled : ""}`}
        >
          <svg
            width="20px"
            height="15px"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
            <g
              id="SVGRepo_tracerCarrier"
              strokeLinecap="round"
              strokeLinejoin="round"
              stroke="#CCCCCC"
              strokeWidth="0.384"
            ></g>
            <g id="SVGRepo_iconCarrier">
              {" "}
              <path
                d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z"
                stroke="#787373"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              ></path>{" "}
            </g>
          </svg>
        </div>
        <input
          className={`${styles.input} ${
            value != "" ? styles["input-spl"] : styles["input-style"]
          }`}
          value={value}
          name="input"
          {...props}
        />
        <div
          className={`${styles["clear-wrapper"]} ${
            value == "" ? styles.disabled : ""
          } `}
          onClick={onClear}
        >
          <Image height={20} src={img} alt="img" />
        </div>
      </div>
    </>
  );
}
