"use client";

import { Product } from "@/lib/types";

interface Props {
  products: Product[];
  quantities: Record<string, number>;
  onAdd: (productId: string) => void;
}

/** One tap adds one unit of a product to the current sale. */
export default function ProductGrid({ products, quantities, onAdd }: Props) {
  if (products.length === 0) {
    return (
      <div className="rounded-xl2 border border-dashed border-depth-200 bg-white p-4 text-center text-sm text-depth-500">
        No products configured yet. Ask the owner to add them.
      </div>
    );
  }

  return (
    <div>
      <span className="mb-1.5 block text-sm font-medium text-depth-600">Tap a product to add it</span>
      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
        {products.map((p) => {
          const inCart = quantities[p._id] ?? 0;
          return (
            <button
              key={p._id}
              type="button"
              onClick={() => onAdd(p._id)}
              aria-label={`Add ${p.label}`}
              className={
                "tap-target relative flex flex-col items-start justify-center rounded-xl2 border-2 px-3 py-2 text-left transition active:scale-[0.97] " +
                (inCart > 0 ? "border-flow-500 bg-flow-500/10" : "border-depth-200 bg-white")
              }
            >
              <span className="font-display text-sm font-bold leading-tight text-depth-900">{p.label}</span>
              <span className="font-mono text-xs text-depth-500">KES {p.unitPrice.toLocaleString()}</span>
              {inCart > 0 && (
                <span className="absolute right-2 top-2 flex h-6 min-w-6 items-center justify-center rounded-full bg-flow-500 px-1.5 font-mono text-xs font-bold text-white">
                  {inCart}
                </span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}