<script setup lang="ts">
import { Head } from '@inertiajs/vue3';

interface Product {
    id: number;
    name: string;
    description: string;
    price_cents: number;
}

defineProps<{
    products: Product[];
}>();

function formatPrice(cents: number): string {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(cents / 100);
}
</script>

<template>
    <Head title="Shop">
        <link rel="preconnect" href="https://rsms.me/" />
        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    </Head>
    <div class="min-h-screen bg-[#FDFDFC] p-6 text-[#1b1b18] dark:bg-[#0a0a0a] lg:p-8">
        <header class="mx-auto mb-8 max-w-4xl">
            <h1 class="text-2xl font-semibold">Products</h1>
        </header>
        <main class="mx-auto max-w-4xl">
            <p v-if="products.length === 0" class="text-gray-500">No products available.</p>
            <div v-else class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                <div
                    v-for="product in products"
                    :key="product.id"
                    class="rounded-lg border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-800"
                >
                    <h2 class="mb-1 font-medium capitalize">{{ product.name }}</h2>
                    <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ product.description }}</p>
                    <p class="text-lg font-semibold">{{ formatPrice(product.price_cents) }}</p>
                </div>
            </div>
        </main>
    </div>
</template>
