import { FC, memo } from 'react';

import Box from '@material-hu/mui/Box';

import { UsePostReactionsReturn } from 'src/hooks/usePostReactions';
import { DEFAULT_EMOJI } from 'src/types/feed';
import { Reaction } from 'src/types/reaction';

import { ReactionsList } from 'src/components/dashboard/reactions';

export type PostCardReactionsProps = {
  postId: number;
  reactions: Reaction[];
  handleAddReaction: UsePostReactionsReturn['handleAddReaction'];
  handleRemoveReaction: UsePostReactionsReturn['handleRemoveReaction'];
  getReactionUsers: UsePostReactionsReturn['getReactionUsers'];
  /** Whether reactions are disabled (e.g., for non-members in groups). */
  disabled?: boolean;
  /** Whether to show user list in drawer. */
  withUserList?: boolean;
  /** Whether to show translation margin. */
  hasTranslation?: boolean;
};

/**
 * PostCardReactions - Unified reactions component for both feed and group posts.
 *
 * This component renders the reactions list for post cards.
 * The reaction logic (API calls, etc.) should be handled by the parent
 * via the usePostReactions hook.
 */
export const PostCardReactions: FC<PostCardReactionsProps> = ({
  postId,
  reactions,
  handleAddReaction,
  handleRemoveReaction,
  getReactionUsers,
  disabled = false,
  withUserList = true,
  hasTranslation = false,
}) => {
  return (
    <Box sx={{ px: 2, mt: hasTranslation ? 0 : 0.5 }}>
      <ReactionsList
        id={postId}
        reactions={reactions}
        getReactionUsers={getReactionUsers}
        onAdd={handleAddReaction}
        onRemove={handleRemoveReaction}
        defaultEmoji={DEFAULT_EMOJI}
        withUserList={withUserList}
        disabled={disabled}
        stackProps={{ sx: { mt: 0 } }}
      />
    </Box>
  );
};

export default memo(PostCardReactions);