import clsx from "clsx";
import PropTypes from "prop-types";

function ProductListTable({ productInfo, onSelectProduct }) {
  return (
    <table className="w-11/12 border-separate border-spacing-0 rounded-2xl overflow-hidden">
      <thead>
        <tr>
          <th className="border border-t-2 border-l-2 border-primary bg-secondary rounded-ss-2xl font-medium text-[#111]">
            Product Code
          </th>
          <th className="border border-t-2 p-2 border-primary bg-secondary font-medium text-[#111]">
            Description
          </th>
          <th className="border border-t-2 p-2 border-primary bg-secondary font-medium text-[#111]">
            Interest Category
          </th>
          <th className="border border-t-2 border-r-2 p-2 border-primary bg-secondary rounded-se-2xl font-medium text-[#111]">
            Description
          </th>
        </tr>
      </thead>
      <tbody>
        {productInfo.map((prod, idx) => (
          <tr
            key={idx}
            className="cursor-pointer hover:bg-grey/[0.2] border-b"
            onClick={() => onSelectProduct(prod)}
          >
            <td
              className={clsx(
                "border border-l-2 border-primary p-2",
                idx === productInfo.length - 1 && "rounded-bl-2xl border-b-2"
              )}
            >
              {prod.productCode}
            </td>
            <td
              className={clsx(
                "border border-primary p-2",
                idx === productInfo.length - 1 && "border-b-2"
              )}
            >
              {prod.productCodeDescription}
            </td>
            <td
              className={clsx(
                "border border-primary p-2",
                idx === productInfo.length - 1 && "border-b-2"
              )}
            >
              {prod.interestCategory}
            </td>
            <td
              className={clsx(
                "border border-r-2 border-primary p-2",
                idx === productInfo.length - 1 && "rounded-br-2xl border-b-2"
              )}
            >
              {prod.interestCategoryDescription}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

ProductListTable.propTypes = {
  productInfo: PropTypes.array.isRequired,
  onSelectProduct: PropTypes.func.isRequired,
};

export default ProductListTable;