// only the parent component can pass props to child component
// EditCourse,ArchiveCourses= they are the grandchild component of Admin view
// product._id is the props that we pass to Update Product
import { useState, useEffect } from 'react';
import { Table } from 'react-bootstrap';

import UpdateProduct from './UpdateProduct';
import DeleteProduct from './ArchiveProduct';
 
export default function AdminView({ productsData, fetchData }) {

	  const [products, setProducts] = useState([]);

	  useEffect(() => {
	    const productArr = productsData.map(product => {
	      return (
	        <tr key={product._id}>
	          <td>{product._id}</td>
	          <td>{product.name}</td>
	          <td>{product.description}</td>
	          <td>{product.price}</td>
	          <td className={product.isActive ? "text-success" : "text-danger"}>{product.isActive ? "Available" : "Unavailable"}</td>
	          <td className="text-center">
	            <UpdateProduct product={product._id} fetchData={fetchData} />
	          </td>
	          <td className="text-center">
	            <DeleteProduct product={product._id} fetchData={fetchData} />
	       
	          </td>
	        </tr>
	      )
	    })

	    setProducts(productArr);

	  }, [productsData, fetchData]);

	  return (
	    <>
	      <h1 className="text-center my-4">Admin Dashboard</h1>
	      <Table striped bordered hover responsive>
	        <thead>
	          <tr className="text-center">
	            <th>ID</th>
	            <th>Name</th>
	            <th>Description</th>
	            <th>Price</th>
	            <th>Availability</th>
	            <th colSpan="2">Actions</th>
	          </tr>
	        </thead>
	        <tbody>
	          {products}
	        </tbody>
	      </Table>
	    </>
	  )
	}
