import HuPills from '@material-hu/components/design-system/Pills';

import { type CalibratedUser } from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import UserListRow from '../UserList/UserListRow';

type CalibrationListRowProps = {
  item: CalibratedUser;
  onClick: (formReviewId: number) => void;
};

const CalibrationListRow = ({ item, onClick }: CalibrationListRowProps) => {
  const { t } = useLokaliseTranslation('performance');
  const { user, answered, formReviewId } = item;
  const fullName = `${user.firstName} ${user.lastName}`.trim();

  return (
    <UserListRow
      user={{
        id: user.userId,
        profilePicture: user.profilePicture,
        firstName: user.firstName,
        lastName: user.lastName,
        fullName,
      }}
      primary={fullName}
      onClick={() => onClick(formReviewId)}
    >
      <HuPills
        label={
          answered
            ? t('calibration.status.calibrated')
            : t('calibration.status.pending')
        }
        size="small"
        type={answered ? 'success' : 'warning'}
        hasIcon={false}
        sx={{
          flexShrink: 0,
          textTransform: 'none',
        }}
      />
    </UserListRow>
  );
};

export default CalibrationListRow;
