import { useRef } from 'react';

import useSnackbar from '@material-hu/components/design-system/Snackbar';

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

import { CommentsSystem } from 'src/components/comments/CommentsSystem';

export type AcknowledgementCommentsProps = Pick<
  Acknowledgement,
  'id' | 'commentCount' | 'lastComments'
> & {
  isDetail?: boolean;
};

export const AcknowledgementComments = ({
  id,
  commentCount,
  lastComments,
  isDetail = false,
}: AcknowledgementCommentsProps) => {
  const commentToScrollToRef = useRef<HTMLElement | null>(null);

  const { enqueueSnackbar } = useSnackbar();

  return (
    <CommentsSystem
      // Core props
      context="acknowledgements"
      postId={id}
      commentCount={commentCount}
      lastComments={lastComments || []}
      commentToScrollToRef={commentToScrollToRef}
      // UI state
      isDetail={isDetail}
      // Error handling
      onError={(error: Error) => {
        enqueueSnackbar({
          title: error.message || 'An error occurred',
          variant: 'error',
        });
      }}
    />
  );
};

export default AcknowledgementComments;