---
import Demo from "../../components/Demo.astro";
import ProjectPage from "../../components/ProjectPage.astro";

export const metadata = {
    title: "Watercooler",
    description: "Virtual office space for remote teams allowing quick questions and spontaneous chats.",
    date: "March 2025",
    slug: "watercooler",
    image: "/watercooler-icon.svg",
    // github: "https://github.com/hex248/watercooler",
    hidden: true,
    tags: ["Web", "React", "TypeScript", "WebRTC", "LiveKit", "PostgreSQL", "OAuth2", "Databases"],
    type: "personal",
};
---

<ProjectPage metadata={metadata}>
    <p>watercooler description here</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-ayu-highlight p-4 rounded mt-4">
            <h2 class="text-lg text-ayu-green-500 mb-2">Key features</h2>
            <ul class="list-disc list-inside space-y-1">
                <li>feature1</li>
                <li><span class="green">Status:</span> active prototype</li>
            </ul>
        </div>

        <div class="bg-ayu-highlight p-4 rounded mt-4">
            <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
            <ul class="list-disc list-inside space-y-1">
                <li>LiveKit (WebRTC)</li>
                <li>Next.js + TypeScript</li>
                <li>Prisma ORM + PostgreSQL</li>
                <li>Tailwind CSS</li>
                <li>Google OAuth with NextAuth.js</li>
                <li>Next.js Server-side rendering & API routes</li>
            </ul>
        </div>
    </div>

    <div class="mt-4">
        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Demo image="/images/watercooler/office.png" title="Office space" />
            <Demo image="/images/watercooler/idk.png" title="idk" />
            <Demo image="/images/watercooler/idk.png" title="idk" />
            <Demo image="/images/watercooler/idk.png" title="idk" />
        </div>
    </div>
</ProjectPage>
