import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { apiConfig } from '@/config/api.config';
import { toast } from 'sonner';
const BASE_URL_CUSTOMER = apiConfig.service_customer;

export default function CustomerWallet({customerid}: any) {
  const [customerWallet, setCustomerWallet] = useState([]);
  if (!customerid) return '';

  useEffect(() => {
    fetchCustomerWallet();
  }, []);

  async function fetchCustomerWallet() {
    try {
      let getCustWallet = await axios.get(`${BASE_URL_CUSTOMER}/customer/wallet`, {
        params: { customerid: customerid }
      });
      setCustomerWallet(getCustWallet.data.data.data);
    } catch (error: any) {
      setCustomerWallet([])
      toast.error(`Wallet Not Found`);
    }
  }

  return (
    <div className="bg-white p-6 rounded-md shadow-md space-y-4">
      <h2 className="text-lg font-semibold">Wallet Member</h2>
      <Card className="p-4">
        {customerWallet ? (
          <div className="overflow-x-auto">
            <table className="min-w-full text-sm text-left">
              <thead className="text-xs text-gray-500 border-b">
                <tr>
                  <th className="p-2">No</th>
                  <th className="p-2">Name</th>
                  <th className="p-2">Balance</th>
                  <th className="p-2">Month Limit</th>
                  <th className="p-2">Credit Limit</th>
                </tr>
              </thead>
              <tbody>
                {customerWallet.map((item:any, index) => (
                  <tr
                    key={item.id}
                    className={`${
                      index % 2 === 0 ? "bg-gray-50" : "bg-white"
                    } hover:bg-gray-100`}
                  >
                    <td className="p-2 font-medium">{index+1}</td>
                    <td className="p-2">{item.wallet}</td>
                    <td className="p-2">{item.amount}</td>
                    <td className="p-2">{item.monthly_limit}</td>
                    <td className="p-2">{item.credit_limit}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <p className="text-sm text-muted-foreground">No wallet</p>
        )}
      </Card>
    </div>
  );
}