import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuTitle from '@material-hu/components/design-system/Title';

import { getInitials } from 'src/utils/userUtils';

type ReviewedHeaderProps = {
  profilePicture?: string | null;
  fullName: string;
};

const ReviewedHeader = ({ profilePicture, fullName }: ReviewedHeaderProps) => (
  <Stack
    sx={{
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      flexWrap: 'wrap',
      gap: 2,
      p: 3,
      borderRadius: '20px',
      backgroundColor: 'background.paper',
      borderColor: 'divider',
      borderWidth: 1,
      borderStyle: 'solid',
      width: '100%',
      boxSizing: 'border-box',
    }}
  >
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 2,
        minWidth: 0,
      }}
    >
      <HuAvatar
        size="large"
        src={profilePicture ?? undefined}
        text={getInitials(fullName)}
        alt=""
        sx={{ flexShrink: 0 }}
      />
      <HuTitle
        title={fullName}
        variant="L"
        sx={{ minWidth: 0 }}
      />
    </Stack>
  </Stack>
);

export default ReviewedHeader;
