import {useState} from "react";

interface Props {
	type: "email" | "text" | "password";
	required?: boolean;
	label?: string;
	placeholder?: string;
	name: string;
	onChange: (value: string) => void;
}

export default function Input({type, label, placeholder, name, required = false, onChange}: Props) {
	const [showPassword, setShowPassword] = useState(false);

	if (type === "password") {
		return (
			<div className="relative flex flex-col gap-3 w-full">
				{label && (
					<label className="font-normal text-base text-mti-gray-dim">
						{label}
						{required ? " *" : ""}
					</label>
				)}
				<div className="w-full h-fit relative">
					<input
						type={showPassword ? "text" : "password"}
						name={name}
						onChange={(e) => onChange(e.target.value)}
						placeholder={placeholder}
						className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
					/>
					<p
						role="button"
						onClick={() => setShowPassword((prev) => !prev)}
						className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
						{showPassword ? "Hide" : "Show"}
					</p>
				</div>
			</div>
		);
	}

	return (
		<div className="flex flex-col gap-3 w-full">
			{label && (
				<label className="font-normal text-base text-mti-gray-dim">
					{label}
					{required ? " *" : ""}
				</label>
			)}
			<input
				type={type}
				name={name}
				onChange={(e) => onChange(e.target.value)}
				placeholder={placeholder}
				className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
				required={required}
			/>
		</div>
	);
}