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

export default async function HamdGuardsPage() {
  const psa = await getARHandGuards();

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