import { RefObject } from 'react';

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

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

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

export type FormTextareaProps = {
  name: string;
  ref?: RefObject<any>;
  label?: string;
  placeholder?: string;
  isRequired?: boolean;
};

export const FormTextarea = ({
  name,
  ref,
  placeholder,
  ...rest
}: FormTextareaProps) => {
  const { value, onChange } = useFormidableContextElement(name);
  return (
    <FormGroup name={name} {...rest}>
      <Textarea
        name={name}
        ref={ref}
        autoComplete={name}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </FormGroup>
  );
};
