import { FormContainer } from "./FormInput.styled";
import { ReactNode } from "react";

export type FormInputProps<T extends ReactNode> = {
  label: string;
  children: T;
  onError?: () => boolean;
  errorMessage?: string;
  hintMessage?: string;
  required?: boolean;
};

const FormInput = ({
  label,
  children,
  onError = () => false,
  errorMessage,
  hintMessage,
  required,
}: FormInputProps<ReactNode>) => {
  return (
    <FormContainer isError={onError()}>
      <label>
        {label}
        {required && <p>*</p>}
      </label>
      {children}
      {onError() ? <span>{errorMessage}</span> : <span>{hintMessage}</span>}
    </FormContainer>
  );
};

export default FormInput;
