import React from 'react'

function PurchasesTable({purchase}) {
  return (
    <table className="wallet-activity w-full table-auto border-collapse text-left">
        <thead className='border-b-2'>
            <tr className='text-slate-600'>
            <th className="p-2">Date</th>
            <th className="p-2">Description</th>
            <th className="p-2">Amount</th>
            <th className="p-2">Fee</th>
            </tr>
        </thead>
        {purchase.data.length ?
        (
        <tbody>
            {purchase.data.map((item, index) => (
            <tr key={index} className='text-slate-500'>
                <td className="p-2">{item.added_date}</td>
                <td className="p-2">{item.confirmation}</td>
                <td className="p-2">{item.amount}</td>
                <td className="p-2">{item.fee}</td>
            </tr>
            ))}
        </tbody>
        )
        :
        purchase.error ? 
        (
        <tbody>
            <tr className='text-slate-500'>
                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
            </tr>
        </tbody>
        )
        :
        <tbody>
            <tr className='text-slate-500'>
                <td className="p-2" colSpan={4}>No Purchase History Found!</td>
            </tr>
        </tbody>
        }
    </table>
  )
}

export default PurchasesTable