"use client";

import type { ProductListBlock } from "@/lib/chat/types";
import { useChatBlocks } from "../ChatBlockContext";
import { BlockCard, ChatLink, Thumb, secondaryButtonClass } from "./shared";

export default function ProductList({ block }: { block: ProductListBlock }) {
  const { copy, busy, sendAction } = useChatBlocks();
  const products = Array.isArray(block.products) ? block.products : [];

  return (
    <BlockCard>
      {products.length === 0 ? (
        <p className="text-gray-500">{copy.noProducts}</p>
      ) : (
        <ul className="space-y-2">
          {products.map((product) => (
            <li key={product.id} className="flex items-start gap-2 rounded-lg p-2 ring-1 ring-gray-100">
              <Thumb src={product.thumbnail} alt={product.name} />
              <div className="min-w-0 flex-1">
                <p className="truncate font-semibold text-gray-900">{product.name}</p>
                {product.category || product.unit ? (
                  <p className="truncate text-[11px] text-gray-500">
                    {[product.category, product.unit].filter(Boolean).join(" · ")}
                  </p>
                ) : null}
                <div className="mt-1.5 flex items-center gap-3">
                  <button
                    type="button"
                    disabled={busy}
                    onClick={() =>
                      void sendAction(
                        { type: "enquiry.start", payload: { product_id: product.id } },
                        { echo: `${copy.getQuote}: ${product.name}` }
                      )
                    }
                    className={secondaryButtonClass}
                  >
                    {copy.getQuote}
                  </button>
                  <ChatLink href={product.href} className="text-[11px]" arrow>
                    {copy.viewDetails}
                  </ChatLink>
                </div>
              </div>
            </li>
          ))}
        </ul>
      )}
    </BlockCard>
  );
}