import { text } from "../lib/config";
import { Slot } from "../lib/slots";
import { AddToCart } from "./AddToCart";
import { HeadActions } from "./HeadActions";
import { PinIcon } from "./icons";
import { ProductMeta } from "./ProductMeta";

/**
 * Column header for one product: image (with Pin / Remove on the shopper's
 * own list and a badge on the base product), name, rating and stock, and
 * Add to cart. Image, name and button follow their rows (image, title,
 * add_to_cart).
 */
export function ProductHead({
  product,
  show,
  pinned,
  pinnedLabel,
  actions,
  onPin,
}) {
  return (
    <th
      scope="col"
      className={`pcfw-table__product${pinned ? " is-pinned" : ""}`}
    >
      <div className={`pcfw-table__media${show.image ? "" : " is-bare"}`}>
        {show.image && (
          <a
            className="pcfw-table__image"
            href={product.permalink}
            tabIndex={-1}
          >
            <img src={product.image} alt="" loading="lazy" decoding="async" />
          </a>
        )}
        {pinned && (
          <span className="pcfw-table__base">
            <PinIcon size={12} />
            {pinnedLabel || text("pinned", "Pinned")}
          </span>
        )}
        <Slot name="bulkPick" product={product} />
        {actions && (
          <HeadActions product={product} pinned={pinned} onPin={onPin} />
        )}
      </div>
      {show.title && (
        <a
          className="pcfw-table__name"
          href={product.permalink}
          dangerouslySetInnerHTML={{ __html: product.name }}
        />
      )}
      <ProductMeta product={product} />
      {show.add_to_cart && <AddToCart cart={product.add_to_cart} />}
    </th>
  );
}