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 { getFullName, getInitials } from 'src/utils/userUtils';

import { type CalibrationUser } from '../types';

type CalibrationHeaderCardProps = {
  user?: CalibrationUser | null;
};

const CalibrationHeaderCard = ({ user }: CalibrationHeaderCardProps) => {
  const fullName = getFullName(user ?? {});

  return (
    <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={user?.profilePicture ?? undefined}
          text={getInitials(fullName)}
          alt=""
          sx={{ flexShrink: 0 }}
        />
        <HuTitle
          title={fullName}
          variant="L"
          sx={{ minWidth: 0 }}
        />
      </Stack>
    </Stack>
  );
};

export default CalibrationHeaderCard;