import { InputHTMLAttributes, ReactNode } from "react";

import styles from "./InputField.module.css";

interface Props extends InputHTMLAttributes<HTMLInputElement> {
	label: string;
	error?: ReactNode;
}

export function InputField(props: Props) {
	return (
		<div className={styles.field}>
			<label htmlFor={props.name} className={styles.label}>
				{props.label}
			</label>
			<input
				{...props}
				className={`${styles.input} ${
					props.error ? styles.inputError : ""
				}`}
				id={props.name}
			/>
			{props.error && <div className={styles.error}>{props.error}</div>}
		</div>
	);
}
