import React from "react";
import { getSnippets } from "@/lib/directus";
import { Terminal, ArrowLeft, Code } from "lucide-react";
import Link from "next/link";
import SnippetsClient from "./SnippetsClient";

export default async function SnippetsPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const snippets = await getSnippets(100) || [];

  return (
    <main className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 py-24 px-6 transition-colors duration-500">
      <div className="max-w-7xl mx-auto">
        <Link 
          href={`/${locale}`}
          className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.3em] text-stone-400 hover:text-stone-900 dark:hover:text-white transition-all mb-12 group"
        >
          <ArrowLeft size={14} className="group-hover:-translate-x-1 transition-transform" />
          Back to Portfolio
        </Link>

        <header className="mb-20">
          <div className="flex items-center gap-4 mb-6">
            <div className="w-12 h-12 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900">
              <Terminal size={24} />
            </div>
            <h1 className="text-5xl md:text-8xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50">
              The Lab<span className="text-liquid-purple">.</span>
            </h1>
          </div>
          <p className="text-xl md:text-2xl font-light text-stone-500 max-w-2xl leading-relaxed">
            A collection of technical snippets, configurations, and mental notes from my daily building process.
          </p>
        </header>

        <SnippetsClient initialSnippets={snippets} />
      </div>
    </main>
  );
}