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

export type FormMultipleInputProps = FormInputProps<ReactNode[]> & {
  separator?: string;
};

const FormMultipleInput = ({
  label,
  children,
  onError = () => false,
  errorMessage,
  hintMessage,
  required,
  separator,
}: FormMultipleInputProps) => {
  return (
    <FormContainer isError={onError()}>
      <label>
        {label}
        {required && <p>*</p>}
      </label>
      <FormMultipleInputContainer
        className={label === "checkbox" ? "checkbox_container" : ""}
      >
        {children.map((data, i) => (
          <>
            {data}
            {children.length - 1 > i && <p>{separator}</p>}
          </>
        ))}
      </FormMultipleInputContainer>
      {onError() ? <span>{errorMessage}</span> : <span>{hintMessage}</span>}
    </FormContainer>
  );
};

export default FormMultipleInput;
