import { useRef } from 'react';

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

import { MarketplacePost } from 'src/types/marketplace';

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

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

export const MarketplaceComments = ({
  id,
  commentCount,
  lastComments,
  isDetail = false,
}: MarketplaceCommentsProps) => {
  const commentToScrollToRef = useRef(null);

  const { enqueueSnackbar } = useSnackbar();

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

export default MarketplaceComments;
