import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import Sidebar from '../sidebar/Sidebar';
import axiosInstance from '../../api/axiosConfig';

const CustomerList = () => {
  const [customers, setCustomers] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    // Fetch the customers data from the JSON file
    getCustomers();
  }, []);

  const getCustomers = async () => {
    try {
      const response = await axiosInstance.get('http://localhost:5000/customers');
      let customers_data = response.data; // List of customers
      setCustomers(customers_data);
    } catch (error) {
      throw error;
    }
  };

  const handleAddCustomer = () => {
    navigate('/add-customer');
  };

  return (
    <div className="flex flex-row min-h-screen">
      <Sidebar />
      <div className="flex-grow p-6 bg-gray-100">
        <div className="bg-white p-6 rounded-lg shadow">
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-2xl font-semibold text-gray-800">Customers List</h1>
            <button
              className="bg-#0e355b text-d1d5db px-4 py-2 rounded-md text-sm"
              onClick={handleAddCustomer}
            >
              Add New Customer
            </button>
          </div>
          <div className="flex items-center mb-4">
            <svg
              className="w-5 h-5 mr-2 text-gray-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
              />
            </svg>
            <span className="text-sm text-gray-600">Filter</span>
          </div>
          <p className="text-sm text-gray-600 mb-4">Total Customers ({customers.length})</p>
          <table className="w-full bg-white">
            <thead>
              <tr className="text-left text-xs uppercase text-gray-600 border-b">
                <th className="py-2">#</th>
                <th className="py-2">customer id</th>
                <th className="py-2">customer fullname</th>
              </tr>
            </thead>
            <tbody>
              {customers.map((customer, index) => (
                <tr key={customer.id} className="border-b last:border-none">
                  <td className="py-2 text-gray-800">{index + 1}</td>
                  <td className="py-2 text-gray-800">{customer.id}</td>
                  <td className="py-2 text-gray-800">{customer.firstname} {customer.lastname} </td>
                  
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default CustomerList;