const ITEMS_PER_PAGE = 5;

export default function ActivityFeed({ actions, sortByDate, environment }: ActivityFeedProps) {
  // ...
}

export const ActivityItemIcon = ({ actionItem }: { actionItem: TAction }) => (
  <div className="h-12 w-12 rounded-full bg-white p-3 text-slate-500  duration-100 ease-in-out group-hover:scale-110 group-hover:text-slate-600">
    {actionItem.actionClass && (
      <div>
        {actionItem.actionClass.type === "code" && <CodeBracketIcon />}
        {actionItem.actionClass.type === "noCode" && <CursorArrowRaysIcon />}
        {actionItem.actionClass.type === "automatic" && <SparklesIcon />}
      </div>
    )}
  </div>
);

export const ActivityItemPopover = ({
  actionItem,
  children,
}: {
  actionItem: TAction;
  children: React.ReactNode;
}) => {
  return (
    <Popover>
      <PopoverTrigger className="group">{children}</PopoverTrigger>
      <PopoverContent className="bg-white">
        <div>
          {actionItem.actionClass && (
            <div>
              <Label className="font-normal text-slate-400">Action Label</Label>
              <p className=" mb-2 text-sm font-medium text-slate-900">{actionItem.actionClass.name}</p>
              <Label className="font-normal text-slate-400">Action Description</Label>
              <p className="text-sm font-medium text-slate-900">{actionItem.actionClass.description}</p>
              <Label className="font-normal text-slate-400">Action Type</Label>
              <p className="text-sm font-medium text-slate-900">{actionItem.actionClass.type}</p>
            </div>
          )}
        </div>
      </PopoverContent>
    </Popover>
  );
};

actionsPrisma.forEach((action) => {
  actions.push({
    id: action.id,
    createdAt: action.createdAt,
    sessionId: action.sessionId,
    properties: action.properties,
    actionClass: action.eventClass || null,
  });
});

const actionItemList: TAction[] = [
  {
    id: "demoId1",
    // ...
  },
  {
    id: "demoId2",
    // ...
  },
];