tsms/src/components/CreateSkill/SkillInfo.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 { CreateSkillInputs } from "@/app/api/skill/actions";

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

  return (
    <>
      <Card sx={{ display: "block" }}>
        <CardContent component={Stack} spacing={4}>
          <Box>
            <Typography variant="overline" display="block" marginBlockEnd={1}>
              {t("Skill Info")}
            </Typography>
            <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
              <Grid item xs={6}>
                <TextField
                  label={t("Skill Name")}
                  fullWidth
                  rows={4}
                  {...register("name", {
                    required: true,
                  })}
                  error={Boolean(errors.name)}
                  helperText={
                    Boolean(errors.name) &&
                    (errors.name?.message
                      ? t(errors.name.message)
                      : `${t("Please input correct ")}${t("name")}`

                      )}
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  label={t("Code")}
                  fullWidth
                  rows={4}
                  {...register("code", {
                    required: true,
                  })}
                  error={Boolean(errors.code)}
                  helperText={
                    Boolean(errors.code) &&
                    (errors.code?.message
                      ? t(errors.code.message)
                      : `${t("Please input correct ")}${t("code")}`
                    )}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  label={t("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 ")}${t("description")}`
                      )}
                />
              </Grid>
            </Grid>
          </Box>
        </CardContent>
      </Card>
    </>
  );
};
export default SkillInfo;