import React from "react";

import { ENGAGEMENT_TYPES } from "../src/v2/components/Engagements/constants";

type Emoji = { native: string; unified: string };
type MenuItems = {
  label: string;
  onClick: () => void;
  key: string;
  isVisible?: boolean;
};

type UserData = { name: string; profileImageUrl?: string };
type CommentData = {
  id: string;
  createdAt?: string;
  commenter?: UserData;
  [key: string]: any;
};

type ActivityData = { id: string; creator?: UserData; [key: string]: any };
type EngagementType = (typeof ENGAGEMENT_TYPES)[keyof typeof ENGAGEMENT_TYPES];

const Engagements: React.FC<{
  data: Array<CommentData | ActivityData>;
  isActivitiesEnabled?: boolean;
  matchType?: (engagement: CommentData | ActivityData) => EngagementType;
  renderComment: (engagement: CommentData, index: number) => React.ReactNode;
  renderActivity: (engagement: ActivityData, index: number) => React.ReactNode;
}> & {
  Comment: React.FC<{
    user: UserData;
    comment: CommentData;
    reactions?: boolean | Emoji[];
    info?: string;
    actions?: MenuItems[];
    className?: string;
    onAddReaction?: (emoji: Emoji) => void;
    onRemoveReaction?: (emoji: Emoji) => void;
  }>;
  Activity: React.FC<{
    user: UserData;
    icon: React.ReactNode;
    unread?: boolean;
    className?: string;
  }>;
  TYPES: typeof ENGAGEMENT_TYPES;
};

export default Engagements;