tsms/src/components/CreateTeam/TeamInfo.tsx

"use client";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import CardActions from "@mui/material/CardActions";
import RestartAlt from "@mui/icons-material/RestartAlt";
import Button from "@mui/material/Button";
import { Controller, useFormContext } from "react-hook-form";
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
import { useCallback } from "react";
import { CreateTeamInputs } from "@/app/api/team/actions";

const TeamInfo: React.FC = (
) => {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors, defaultValues },
    control,
    reset,
    resetField,
    setValue,
  } = useFormContext<CreateTeamInputs>();

  const resetTeam = useCallback(() => {
    console.log(defaultValues);
    if (defaultValues !== undefined) {
      resetField("description");
    }
  }, [defaultValues]);
  
  return (
    <>
      <Card sx={{ display: "block" }}>
        <CardContent component={Stack} spacing={4}>
          <Box>
            <Typography variant="overline" display="block" marginBlockEnd={1}>
              {t("Team Info")}
            </Typography>
                <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                    <Grid item xs={12}>
                    <TextField
                        label={t("Team Description")}
                        fullWidth
                        multiline
                        rows={4}
                        {...register("description", {
                            required: true,
                        })}
                        error={Boolean(errors.description)}
                        helperText={Boolean(errors.description) && (errors.description?.message ? t(errors.description.message) : t("Please input correct description"))}
                    />
                    </Grid>
                </Grid>
          </Box>
        </CardContent>
      </Card>
    </>
  );
};
export default TeamInfo;