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'>Publicar</Button>

      </Box>

    </Form>

  )

}