import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";

type UserTabProps = {
  user: {
    id: number;
    registrationDate: string;
    email: string;
    phone: string;
    type: string;
    fullname: string;
    walletBalance: string;
  };
};

export const UserTab = ({ user }: UserTabProps) => {
  const theme = useTheme();
  const mobile = useMediaQuery(theme.breakpoints.down(700));

  return (
    <Box
      sx={{
        display: mobile ? "block" : "flex",
        columnGap: "15px",
        padding: "25px",
      }}
    >
      <Box sx={{ maxWidth: "300px", width: "100%" }}>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>ID</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {" "}
            {user.id}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Дата регистрации</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {user.registrationDate}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Email</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {user.email}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Телефон</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {user.phone}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Тип:</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {user.type}
          </Typography>
        </Box>
      </Box>
      <Box sx={{ maxWidth: "300px", width: "100%" }}>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>ФИО:</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {user.fullname}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>
            Внутренний кошелек
          </Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {user.walletBalance}
          </Typography>
        </Box>
      </Box>
    </Box>
  );
};