import { type FC } from 'react';
import { Link as RouterLink } from 'react-router-dom';

import Link from '@material-hu/mui/Link';
import Stack from '@material-hu/mui/Stack';
import Typography, { type TypographyProps } from '@material-hu/mui/Typography';

import { profileRoutes } from 'src/pages/dashboard/profile/routes';
import { type User } from 'src/types/user';
import { getFullName } from 'src/utils/userUtils';

import ProfilePicture from 'src/components/user/ProfilePicture';

export type ProfilePiectureWithLinkProps = {
  user?: User;
  variantNameUser?: TypographyProps['variant'];
};

export const ProfilePiectureWithLink: FC<
  ProfilePiectureWithLinkProps
> = props => {
  const { user, variantNameUser = 'subtitle1' } = props;

  return (
    <Stack
      flexDirection="row"
      alignItems="center"
      gap={1}
      sx={{ mt: 0.5 }}
    >
      <ProfilePicture
        id={user?.id}
        user={user}
        sx={{ width: '32px', height: '32px', fontSize: '14px' }}
        withLink
      />
      <Link
        color="textPrimary"
        sx={{
          textDecoration: 'none',
          '&:hover': {
            color: 'textPrimary',
            textDecoration: 'underline',
          },
        }}
        component={RouterLink}
        to={profileRoutes.profile(user?.id)}
      >
        <Typography variant={variantNameUser}>
          {!!user && getFullName(user)}
        </Typography>
      </Link>
    </Stack>
  );
};

export default ProfilePiectureWithLink;