"use client";

import { useAuth } from "@/lib/contexts/auth";
import { Avatar, Box, Chip, Divider, Stack, Typography } from "@mui/material";
import moment from "jalali-moment";

const ProfileInfo = () => {
  const { user } = useAuth();

  return (
    <>
      <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
        <Avatar
          alt="User Image"
          src={user?.avatar}
          sx={{ width: 56, height: 56 }}
        />
        <Stack sx={{ ml: 1 }}>
          <Box sx={{ display: "flex", alignItems: "end", gap: 0.7 }}>
            <Typography variant="h6">{`${user.full_name}`}</Typography>
          </Box>
          <Typography variant="caption">
            شماره تماس داخلی : {user.telephone_id}
          </Typography>
        </Stack>
      </Box>
      <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
        <Typography variant="button" color="#757575">
          آخرین ورود
        </Typography>
        <Divider sx={{ mx: 2, flexGrow: 1 }} />
        <Typography variant="subtitle2" color="#757575">
          {moment(user.last_login).locale("fa").fromNow()}
        </Typography>
      </Box>
      <Box sx={{ my: 0.5 }}>
        <Divider>
          <Chip
            size="small"
            label={user.username}
            color="success"
            variant="outlined"
          />
        </Divider>
      </Box>
    </>
  );
};
export default ProfileInfo;
