import { SaveQcItemInputs } from "@/app/api/settings/qcItem/actions";
import {
  Box,
  Card,
  CardContent,
  Grid,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";

const QcItemDetails = () => {
  const { t } = useTranslation("qcItem");
  const { register } = useFormContext<SaveQcItemInputs>();

  return (
    <Card sx={{ display: "block" }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          {/* <Typography variant={"overline"} display={"block"} marginBlockEnd={1}>
            {t("Qc Item Details")}
          </Typography> */}
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <TextField
                label={t("Code")}
                fullWidth
                {...register("code", {
                  required: "Code required!",
                  maxLength: 30,
                })}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Name")}
                fullWidth
                {...register("name", {
                  required: "Name required!",
                  maxLength: 30,
                })}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                label={t("Description")}
                // multiline
                fullWidth
                {...register("description", {
                  maxLength: 100,
                })}
              />
            </Grid>
          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};

export default QcItemDetails;