'use client'

import { useEffect, useState } from 'react'
import { useTranslations } from 'next-intl'
import AccountLayout from '@/components/frontend/account/AccountLayout'
import WithdrawForm from '@/components/frontend/referral/WithdrawForm'

export default function WithdrawEarningsPageClient() {
  const t = useTranslations('Account.earnings')
  const [availableBalance, setAvailableBalance] = useState<number | null>(null)

  useEffect(() => {
    fetch('/api/frontend/earnings', { credentials: 'include' })
      .then((res) => res.json())
      .then((res) => {
        if (res.success) setAvailableBalance(res.data.availableBalance)
      })
  }, [])

  return (
    <AccountLayout title={t('withdrawTitle')} description={t('withdrawDescription')}>
      <div className="max-w-lg mx-auto">
        {availableBalance === null ? (
          <div className="text-center py-12">
            <div className="animate-spin w-8 h-8 border-4 border-primary border-t-transparent rounded-full mx-auto" />
          </div>
        ) : (
          <WithdrawForm availableBalance={availableBalance} />
        )}
      </div>
    </AccountLayout>
  )
}