'use client';

import FinanceDetail from '@/components/pages/finance/FinanceDetail';
import useSWR from 'swr';
import { useRouter, useSearchParams } from 'next/navigation';
import { FinanceApi } from '@/services/api/finance';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';

const FinanceDetailPage = () => {
  const router = useRouter();
  const financeId = useSearchParams().get('financeId');

  const { data: finance } = useSWR(financeId, () =>
    FinanceApi.getSingleFetcher(financeId as string)
  );

  if (!financeId) {
    router.back();

    return (
      <div className='w-full flex flex-row justify-center items-center p-4'>
        <span className='loading loading-spinner loading-xl' />
      </div>
    );
  }

  console.log(finance);

  // if (!finance || isResponseError(finance)) {
  //   router.replace('/404');
  //   return;
  // }

  return (
    <>
      {isResponseSuccess(finance) && <FinanceDetail finance={finance.data} />}
    </>
  );
};

export default FinanceDetailPage;