Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useForm } from 'react-hook-form';
import { useSelector } from 'react-redux';
import { Box, Button } from '@mui/material';

import Input from '@components/UI/inputs/Input';
import Form from '@components/common/form';

export default function CommentForm({ onSubmit = () => {} }) {
  const labels = useSelector(({ intl }) => intl.labels);

  const {
    control,
    handleSubmit,
    reset,
    formState: { errors }
  } = useForm({
    defaultValues: {
      comment: ''
    }
  });

  const submitHandler = handleSubmit(({ comment }) => {
    onSubmit(comment);
    reset();
  });

  return (
    <Form onSubmit={submitHandler}>
      <Box
        sx={{
          display: 'flex',
          gap: ({ spacing }) => spacing(0.5),
          alignItems: 'center'
        }}
      >
        <Input
          name='comment'
          placeholder={labels.write_a_comment}
          control={control}
          error={errors.comment?.message}
          rules={{ required: 'Este campo es requerido' }}
          variant='search'
          autoComplete='off'
        />
        <Button color='primary' type='submit'>
          Publicar
        </Button>
      </Box>
    </Form>
  );
}