import { getARCompleteLowers, getProductType } from "@queries/PSA";
import partTypes from 'src/data/parts_cats.json';
import { psa } from "@db/schema/Psa";
import styles from "../styles.module.css";
import PageHero from "@components/PageHero";
import Link from "next/link";

export default async function LowerReceiverPage() {
  const psa = await getProductType(partTypes["AR COMPLETE LOWERS"]);

  return (
    <div>
      <PageHero title="Lowers" />
      <div className="container mx-auto py-5">
        <table
          className={
            "table-auto border-separate border-spacing-4 border border-slate-500 text-gray-900"
          }
        >
          <thead>
            <tr >
              <th>Component</th>
              <th>Manufacturer</th>
              <th>Model #</th>
              <th>Price</th>
              <th>Sale 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>{psa.retailPrice}</td>
                <td className="flex items-center gap-2">
                  ${Number(psa.salePrice).toFixed(2)}
                  {/* I dont think this is exactly correct but works for now? */}
                  <Link href={psa.buyLink} passHref={true}>
                    <button >Buy</button>
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
