import { Button } from "@components/ui/button";
import { getPSA } from "@/db/queries/PSA";

export default async function LowerReceiverPage() {
  const psa = await getPSA();

  return (
    <div className="container mx-auto">
      <table className="table-auto border-separate border-spacing-2 border border-slate-500">
        <thead>
          <tr>
            <th>Component</th>
            <th>Manufacturer</th>
            <th>Color</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {psa.map((psa) => (
            <tr key={psa.upc}>
              <td>
                {psa.category}
              </td>
              <td>manufacturer</td>
              <td>color</td>
              <td className="flex items-center gap-2">
                ${Number(psa.salePrice).toFixed(2)}
                <Button variant="outline">Buy</Button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}