import { Box, IconButton, Typography } from '@mui/material';
import { Icon } from '@rkheftan/harmony-ui';
import { More } from 'iconsax-react';
import type { UserInfo } from '@/contexts/AuthContext';
import { LTRTypography } from '../common/LTRTypography';

interface HeaderProps {
  user: UserInfo;
}

export const Header: React.FC<HeaderProps> = ({ user }) => {
  return (
    <Box
      sx={{
        p: 2,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: (t) => t.spacing(10.5),
      }}
    >
      <Box>
        <Typography variant="body1">{user.fullName}</Typography>
        <LTRTypography variant="body2" color="textSecondary">
          {user.phoneNumber ?? user.email}
        </LTRTypography>
      </Box>

      <IconButton>
        <Icon Component={More} />
      </IconButton>
    </Box>
  );
};