interface ProfileActionsProps {
  followData: { totalFollowers: number; totalFollowing: number };
  setActiveDrawer: React.Dispatch<
    React.SetStateAction<"following" | "followers" | "editProfile" | null>
  >;
  t: (key: string) => string;
}

export const ProfileActions = ({ followData, setActiveDrawer, t }: ProfileActionsProps) => (
  <div className="text-right space-y-10 max-sm:text-center max-md:space-y-5 max-[991px]:space-y-5">
    <button className="text-base font-medium text-primary500 hover:underline dark:text-primary400 max-sm:absolute max-sm:top-0 max-sm:right-0 rtl:max-sm:right-auto rtl:max-sm:left-0"
      onClick={() => setActiveDrawer("editProfile")}
    >
      {t("dashboard.edit_profile")}
    </button>
    <div className="flex gap-6 text-xs text-gray-500 justify-end max-sm:justify-center max-sm:gap-20 dark:text-neutrals300">
      <div className="cursor-pointer" onClick={() => setActiveDrawer("followers")}>
        {t("dashboard_page.followers")}
        <br />
        <span className="font-bold text-neutrals800 text-2xl underline dark:text-neutrals300">
          {followData.totalFollowers}
        </span>
      </div>
      <div className="cursor-pointer" onClick={() => setActiveDrawer("following")}>
        {t("dashboard_page.following")}
        <br />
        <span className="font-bold text-neutrals800 text-2xl underline dark:text-neutrals300">
          {followData.totalFollowing}
        </span>
      </div>
    </div>
  </div>
);