import { text } from "../lib/config";
import { AddToCart } from "./AddToCart";
import { Html } from "./Html";

/**
 * Table › "Repeat price and Add to cart at the bottom": the price and the
 * buttons again, so long tables don't need scrolling back up.
 */
export function TableFoot({ data, products = data.products, pad = false }) {
  const price = data.rows.find((row) => row.key === "price");

  return (
    <tfoot className="pcfw-table__foot">
      <tr>
        <th scope="row" className="pcfw-table__label">
          {price ? <Html html={price.label} /> : text("price", "Price")}
        </th>
        {products.map((product) => (
          <td key={product.id} className="pcfw-table__cell">
            <Html html={product.price_html} />
          </td>
        ))}
        {pad && <td className="pcfw-table__pad" />}
      </tr>
      <tr>
        <td className="pcfw-table__corner" />
        {products.map((product) => (
          <td key={product.id} className="pcfw-table__cell">
            <AddToCart cart={product.add_to_cart} />
          </td>
        ))}
        {pad && <td className="pcfw-table__pad" />}
      </tr>
    </tfoot>
  );
}
