import { memo } from 'react';

import { type VirtualItem } from '@tanstack/virtual-core';
import Stack from '@material-hu/mui/Stack';

import { type Acknowledgement } from '../../types';
import AcknowledgementCard from '../AcknowledgementCard';

type KudosListItemProps = {
  virtualRow: VirtualItem;
  acknowledgement: Acknowledgement;
  measureElement: (element: Element | null) => void;
};

export const KudosListItem = memo(
  ({ virtualRow, acknowledgement, measureElement }: KudosListItemProps) => {
    return (
      <Stack
        data-index={virtualRow.index}
        ref={measureElement}
        sx={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          transform: `translateY(${virtualRow.start}px)`,
          willChange: 'transform',
          pb: 2,
        }}
      >
        <AcknowledgementCard acknowledgement={acknowledgement} />
      </Stack>
    );
  },
);
