'use client';

import { SubscriptionsList } from '@/app/(protected)/(sanad)/subscriptions/components/subscriptionsList/subscriptionsList';
import { fetchSubscriptions } from '@/network/apis/dashboard/subscriptions/subscriptions.apis';
import { useQuery } from '@tanstack/react-query';

export const UserSubscriptions = ({ userId }: { userId: string }) => {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user_subscriptions', userId],
    queryFn: () => fetchSubscriptions({ page: 1, perPage: 10, userId }),
  });

  if (isLoading) return <div>Loading user subscriptions...</div>;
  if (error) return <div>Error loading user subscriptions</div>;
  if (!data) return <div>No subscriptions found</div>;

  return <SubscriptionsList subscriptions={data} />;
};