import { AppShell, Button, Card } from "@kodeme-io/next-core-ui";
import { Home, Settings, User } from "lucide-react";

export default function Page() {
  return (
    <AppShell
      navigation={[
        { href: "/", label: "Home", icon: <Home className="h-4 w-4" /> },
        { href: "/about", label: "About", icon: <User className="h-4 w-4" /> },
        {
          href: "/settings",
          label: "Settings",
          icon: <Settings className="h-4 w-4" />,
        },
      ]}
    >
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">
            Welcome to {{projectName}}
          </h1>
          <p className="text-muted-foreground mt-2">
            Get started by editing{" "}
            <code className="relative rounded bg-muted px-2 py-1 font-mono text-sm">
              src/app/page.tsx
            </code>
          </p>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          <Card>
            <div className="p-6">
              <h3 className="font-semibold">Documentation</h3>
              <p className="text-sm text-muted-foreground mt-2">
                Find in-depth information about @next-core packages.
              </p>
              <Button variant="link" className="mt-4 p-0">
                Learn More →
              </Button>
            </div>
          </Card>

          <Card>
            <div className="p-6">
              <h3 className="font-semibold">Components</h3>
              <p className="text-sm text-muted-foreground mt-2">
                Explore the @kodeme-io/next-core-ui component library.
              </p>
              <Button variant="link" className="mt-4 p-0">
                Browse →
              </Button>
            </div>
          </Card>

          <Card>
            <div className="p-6">
              <h3 className="font-semibold">Odoo Integration</h3>
              <p className="text-sm text-muted-foreground mt-2">
                Connect to Odoo with @kodeme-io/next-core-odoo-api.
              </p>
              <Button variant="link" className="mt-4 p-0">
                Get Started →
              </Button>
            </div>
          </Card>
        </div>
      </div>
    </AppShell>
  );
}