import { getPSA, getLowerBuildKits, getProductType} from "@queries/PSA";
import { psa } from '@db/schema/Psa';
import partTypes from 'src/data/parts_cats.json';
import  styles  from '../styles.module.css';

export default async function GripsPage() {
  const psa = await getProductType(partTypes["AR PARTS"]);

  return (
    <div className="container mx-auto">
      <table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
        <thead>
          <tr className={styles.tr}>
            <th>Component</th>
            <th>Manufacturer</th>
            <th>Model #</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {psa.map((psa) => (
            <tr key={psa.upc}>
              <td>{psa.category}</td>
              <td>{psa.brandName}</td>
              <td>{psa.modelnumber}</td>
              <td className="flex items-center gap-2">
                ${Number(psa.salePrice).toFixed(2)}
                <button >Buy</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}