import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

import mail from "@/assets/mail.svg"
import lock from "@/assets/lock-closed.svg"
import eyeOff from "@/assets/eye-off.svg"
// import eyeOn from "@/assets/eye-on.svg"

interface InputWithLabelProps {
    labelValue      ?:  string;
    typeName        ?:  string;
    placeHolderName ?:  string;
    srcIcon         ?:  typeof mail | typeof lock;
}

export function InputWithLabel({
  labelValue,
  typeName,
  placeHolderName,
  srcIcon,

}:InputWithLabelProps) {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">{labelValue}</Label>
      <div>
        <img src={srcIcon}></img>
        <Input type={typeName} placeholder={placeHolderName} />
        {(typeName === 'password' || typeName === 'Password') && (
          <img src={eyeOff} alt="Icon 2" />
        )}
      </div>
    </div>
  )
}
