import {useEffect, useState} from 'react'
import { getPaymentDetails } from '../../core/apiRequest'

type Props = {
  reference: string | null
}

// type PaymentPayloads = {
//   uid?: string
//   event?: string
//   customer_code?: string
//   plan_name?: string
//   plan_code?: string
//   subscription_code?: string | null,
//   amount?: string
//   authorization_code?: string
//   gateway_response?: string
//   gateway_status?: string
//   reference?: string
//   added?: string
// }

export default function Payment({reference}:Props) {

  const [paymentDetails, setPaymentDetails] = useState<any>({
    loading: true,
    data: {}
  })

  useEffect(()=>{
    getPaymentDetails({reference}).then(res => {
      setPaymentDetails({loading:false, data:res?.data?.payment})
      console.log(res?.data?.payment)
    }).catch(err => {
      setPaymentDetails({loading:false, data:{}})
      console.log(err)
    })
  },[])

  return (
    <div className='w-full'>
      <div className='p-4'>
        <h1 className='p-2 mb-3 text-2xl'>Confirmation</h1>
        <div className='p-8 w-full max-w-2xl bg-white shadow-md rounded-md'>
          {paymentDetails.loading ? 
          <p>Loading...</p>
          :
          (paymentDetails?.data && Object.keys(paymentDetails?.data).length > 0) ?
          <>
          {Object.keys(paymentDetails?.data).map((item) => (
            <div key={item} className='p-2 flex gap-1'>
            <p className='w-64 font-semibold'>{item}</p>
            <p className=''>{paymentDetails?.data[item]}</p>
            </div>
          ))}
          </>
          :
          <p className='p-2'>No Payment Found!</p>
          }
        </div>
      </div>
    </div>
  )
}