'use client';

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

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

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

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-muted-foreground">로딩 중...</div>
      </div>
    );
  }

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