import ConfettiBackground from '@material-hu/components/composed-components/ConfettiBackground/index';

import { useAuth } from 'src/contexts/JWTContext';
import { type Acknowledgement } from 'src/pages/dashboard/acknowledgements/types';

export type AcknowledgementCoverProps = Pick<Acknowledgement, 'category'>;

const AcknowledgementCover = ({ category }: AcknowledgementCoverProps) => {
  const { instance } = useAuth();

  const showPoints =
    instance?.showAcknowledgmentsPoints && category.pointsVisible;

  return (
    <ConfettiBackground
      bgColor={category?.color}
      coverPicture={category?.coverPictureUrl}
      points={category?.points?.toString()}
      showConfetti={category?.confettiVisible}
      showPoints={!!showPoints}
      stylesOptions={{ borderRadius: 0 }}
    />
  );
};

export default AcknowledgementCover;
