"use client";

import { UserResult } from "@/app/api/user";
import {
  Card,
  CardContent,
  Grid,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";

interface Props {
    data: UserResult
}


const UserDetail: React.FC<Props> = ({
    data
}) => {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors },
    control,
  } = useFormContext<UserResult>();

  return (
    <Card>
      <CardContent component={Stack} spacing={4}>
        <Typography variant="overline" display="block" marginBlockEnd={1}>
          {t("User Detail")}
        </Typography>
        <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
          <Grid item xs={6}>
            <TextField
              label={t("username")}
              fullWidth
              {...register("username", {
                required: "username required!",
              })}
              error={Boolean(errors.name)}
            />
          </Grid>
          {/* <Grid item xs={6}>
            <TextField
              label={t("First Name")}
              fullWidth
              {...register("firstname", {
                required: "Name required!",
              })}
              error={Boolean(errors.firstname)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("Last Name")}
              fullWidth
              {...register("lastname", {
                required: "Name required!",
              })}
              error={Boolean(errors.lastname)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("title")}
              fullWidth
              {...register("title", {
                required: "title required!",
              })}
              error={Boolean(errors.title)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("department")}
              fullWidth
              {...register("department", {
                required: "department required!",
              })}
              error={Boolean(errors.department)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("email")}
              fullWidth
              {...register("email", {
                required: "email required!",
              })}
              error={Boolean(errors.email)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("phone1")}
              fullWidth
              {...register("phone1", {
                required: "phone1 required!",
              })}
              error={Boolean(errors.phone1)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("phone2")}
              fullWidth
              {...register("phone2", {
                required: "phone2 required!",
              })}
              error={Boolean(errors.phone2)}
            />
          </Grid>
          <Grid item xs={12}>
            <TextField
              label={t("remarks")}
              fullWidth
              multiline
              rows={4}
              variant="filled"
              {...register("remarks", {
                required: "remarks required!",
              })}
              error={Boolean(errors.remarks)}
            />
          </Grid> */}
        </Grid>
      </CardContent>
    </Card>
  );
};

export default UserDetail;