Product Card

import React from "react";
import { useNavigate } from "react-router-dom";

const ProductCard = ({
  product,
  enabledSelection,
  selected,
  onProductSelected,
  onProductDeselect,
}) => {
  const navigate = useNavigate();
  const selectProductHandler = () => {
    if (enabledSelection) {
      if (selected) {
        onProductDeselect(product);
      } else {
        onProductSelected(product);
      }
    } else {
      navigate(`/products/edit/${product.product_id}`);
    }
  };
  const priceRange = `${product.min_price} EGP - ${product.max_price} EGP`;
  return (
    <div
      onClick={selectProductHandler}
      style={{
        backgroundColor: "lightgrey",
        padding: "20px",
        margin: "10px",
        borderRadius: "10px",
        display: "flex",
        gap: "20px",
        userSelect: selected ? "none" : "auto",
        position: "relative",
      }}
    >
      <div
        style={{
          position: "absolute",
          height: "8px",
          width: "8px",
          borderRadius: "50%",
          backgroundColor: product.is_visible ? "green" : "red",
        }}
      ></div>
      <img
        src="/logo512.png"
        alt="Logo"
        style={{ width: "10rem", height: "10rem" }}
      />
      {/* Content Div --------------------------------------- */}
      <div style={{ width: "100%" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
          }}
        >
          <h1>{product.name}</h1>
          {enabledSelection && (
            <input
              type="checkbox"
              checked={selected}
              onChange={() => {}}
              style={{
                width: "20px",
                height: "20px",
                marginRight: "8px",
                cursor: "pointer",
              }}
            />
          )}
        </div>
        <span>
          {" "}
          {product.variants > 0 ? priceRange : `${product.base_price} EGP`}
        </span>
        <div
          style={{
            display: "flex",
            gap: "1rem",
            justifyContent: "space-between",
          }}
        >
          <div>
            <p style={{ marginBottom: 0 }}>Variants</p>
            <h4 style={{ margin: 0 }}>{product.variants}</h4>
          </div>
          <div>
            <p style={{ marginBottom: 0 }}>Availability</p>
            <h4 style={{ margin: 0 }}>{product.availability || 0}</h4>
          </div>
          <div>
            <p style={{ marginBottom: 0 }}>Ordered</p>
            <h4 style={{ margin: 0 }}>{product.orders || 0}</h4>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductCard;