import {
  Code2,
  Database,
  MessageSquare,
  Sparkles,
  Layers,
  Zap,
} from "lucide-react";
import { TemplateCard } from "./template-card";

const templates = [
  {
    title: "Next.js Starter",
    description:
      "A Next.js App Router template configured with TypeScript, Tailwind CSS, and best practices.",
    icon: Code2,
    tags: ["Next.js", "TypeScript", "Tailwind"],
  },
  {
    title: "Full-Stack SaaS",
    description:
      "Complete SaaS boilerplate with authentication, database, payments, and admin dashboard.",
    icon: Layers,
    tags: ["Auth", "Database", "Stripe"],
  },
  {
    title: "AI Chatbot",
    description:
      "An open-source AI chatbot template built with Next.js, Vercel AI SDK, and modern UI.",
    icon: MessageSquare,
    tags: ["AI", "Chat", "OpenAI"],
  },
  {
    title: "Database Starter",
    description:
      "Get started with Supabase or Neon by building a data-driven app with auth and storage.",
    icon: Database,
    tags: ["Supabase", "PostgreSQL", "Auth"],
  },
  {
    title: "API Platform",
    description:
      "RESTful API template with route handlers, middleware, validation, and documentation.",
    icon: Zap,
    tags: ["API", "REST", "Docs"],
  },
  {
    title: "AI Image Generator",
    description:
      "Create stunning images with AI using Fal, Replicate, or Stability AI integrations.",
    icon: Sparkles,
    tags: ["AI", "Images", "Generation"],
  },
];

export function TemplateGrid() {
  return (
    <section id="templates" className="container mx-auto px-4 py-16">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {templates.map((template, index) => (
          <TemplateCard key={index} {...template} />
        ))}
      </div>
    </section>
  );
}