export default function CustomerPaymentsView({payments}) {
    return <>
        <div className="pb-5">
            <div className="flex flex-col gap-1">
                <div className="w-full">
                    <h4 className="font-semibold text-lg">Payments</h4>
                </div>
                <div className="w-full overflow-x-auto">
                    <>
                        <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
                            <thead className="py-2 text-sm text-slate-500 text-left">
                            <tr>
                                <th scope="col" className="px-2 py-2">
                                    #
                                </th>
                                <th scope="col" className="px-2">
                                    Added
                                </th>
                                <th scope="col" className="px-2">
                                    Option Name
                                </th>
                                <th scope="col" className="px-2">
                                    Amount
                                </th>
                                <th scope="col" className="px-2">
                                    Currency
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {(payments && payments.length > 0) ? payments?.map((item, index) => (
                                    <tr key={index} className="py-2 border-t border-dashed border-slate-300">
                                        <td className="px-2 py-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{index+1}</div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{item?.added}</div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{item?.option_name}</div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{item?.amount}</div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">Dollars</div>
                                            </div>
                                        </td>
                                    </tr>
                                ))
                                :
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-3 py-2" colSpan={4}>
                                        <div className="flex justify-center items-center">
                                            No Record Found
                                        </div>
                                    </td>
                                </tr>
                            }
                            </tbody>
                        </table>
                    </>
                </div>
            </div>
        </div>
    </>
}