'use client';

import { useEffect, useState } from 'react';
import { PaymentHistoryManagement } from '@/components/settings/PaymentHistoryManagement';
import { getPayments } from '@/components/settings/PaymentHistoryManagement/actions';
import { GenericPageSkeleton } from '@/components/ui/skeleton';

export default function PaymentHistoryPage() {
  const [data, setData] = useState<Awaited<ReturnType<typeof getPayments>>['data']>();
  const [pagination, setPagination] = useState<Awaited<ReturnType<typeof getPayments>>['pagination']>();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    getPayments({ perPage: 100 })
      .then(result => {
        setData(result.data);
        setPagination(result.pagination);
      })
      .finally(() => setIsLoading(false));
  }, []);

  if (isLoading) return <GenericPageSkeleton />;

  if (!data || !pagination) {
    return null;
  }

  return (
    <PaymentHistoryManagement
      initialData={data}
      initialPagination={pagination}
    />
  );
}
