import { StyledInputs } from '@/components/mui/styled-inputs'
import { TextField } from '@mui/material'
import { useForm } from 'react-hook-form'

type FormModulesProps = {
  index?: number
  remove?: (index: number | number[]) => void
}

export function FormNewModules({ index, remove }: FormModulesProps) {
  const { register } = useForm()

  return (
    <div className="flex flex-col p-4 gap-6 border border-gray-100">
      <TextField
        label="Título"
        variant="standard"
        type="text"
        sx={StyledInputs({ color: '#26AAA7' })}
        {...register(`newModule.${index}.name`)}
      />

      <TextField
        label="Descrição"
        variant="standard"
        type="text"
        multiline
        rows={4}
        sx={StyledInputs({ color: '#26AAA7' })}
        {...register(`newModule.${index}.description`)}
      />
    </div>
  )
}
