import { Link } from "react-router-dom";
import { Dropdown } from "flowbite-react";
import "./stylesheets/shared.css"
import "./stylesheets/product_listing.css";

export default function ProductListing({ product }) {
  const categories = product.attributes.categories.map(category =>
    <Dropdown.Item>
      {category}
    </Dropdown.Item>
  );

  return (
    <div className="flex w-4/6 my-4  border-solid border-2 border-gray-200">
      <img className="listing-image" src={product.attributes.picture} />
      <div className="overflow-hidden">
        <table>
          <thead>
            <tr >
              <th scope="col" className="product-listing-text font-bold text-2xl px-6 py-4 hover:text-neutral-700">
                <Link to={`/products/${ product.attributes.public_id }`}>
                  {product.attributes.name}
                </Link>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b dark:border-neutral-500">
              <td className="product-listing-text text-xl px-6 py-4">Precio al por menor</td>
              <td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.unitary_price} $</td>
            </tr>
            <tr className="border-b dark:border-neutral-500">
              <td className="product-listing-text text-xl px-6 py-4">Precio al por mayor</td>
              <td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.bulk_price} $</td>
            </tr>
            <tr className="border-b dark:border-neutral-500">
              <td className="product-listing-text text-xl px-6 py-4">Disponibles</td>
              <td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.available_quantity}</td>
            </tr>
            <tr className="border-b dark:border-neutral-500">
              <td className="product-listing-text text-xl px-6 py-4">Proveedor</td>
              <td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.company.name}</td>
            </tr>
          </tbody>
        </table>
        <div className="my-2">
          <Dropdown label="Categorías" dismissOnClick={false} color="dark">
            {categories}
          </Dropdown>
        </div>
      </div>
    </div>
  );
}