---
import Layout from '../layouts/Main.astro';

import * as schema from '../db/schema.ts';
import { eq } from 'drizzle-orm';
import { db } from '../db';

// Get some sample Pokemon data from the database
const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(10);
---

<Layout>
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1>Pokemon</h1>
        </div>
    </div>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
        {pokemon.map((card) => (
            <div class="col">
                <img src={`/public/cards/${card.productId}.jpg`} alt={card.productName} class="img-fluid" />
                {card.productName} - {card.number}
            </div>
        ))}

    </div>
</div>
</Layout>