import { RefObject } from 'react';

import { Input } from '@chakra-ui/react';

import { FormGroup, FormGroupProps } from '@/components/form/FormGroup';

import { useFormidableContextElement } from '../formidable';

export type FormInputProps = {
  name: string;
  ref?: RefObject<any>;
  label?: string;
  placeholder?: string;
  isRequired?: boolean;
} & Omit<FormGroupProps, 'children'>;

export const FormInput = ({
  name,
  ref,
  placeholder,
  ...rest
}: FormInputProps) => {
  const { value, onChange } = useFormidableContextElement(name);
  return (
    <FormGroup name={name} {...rest}>
      <Input
        ref={ref}
        type="text"
        name={name}
        autoComplete={name}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </FormGroup>
  );
};
