import { Box, Typography } 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) => (
  <Box sx={{ display: "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>
);