import Link from "next/link";
import {
  User,
  Key,
  Bookmark,
  Bell,
  BarChart3,
  ArrowLeft,
  ChevronRight,
} from "lucide-react";
import { SiteHeader } from "@/components/site-header";

const sections = [
  {
    icon: User,
    title: "Profile",
    description:
      "Manage your display name, email, avatar, and other information.",
    href: "/account/profile",
  },
  {
    icon: Key,
    title: "API Keys",
    description: "Create and manage keys for API based DNS lookups.",
    href: "/account/api-keys",
  },
  {
    icon: Bookmark,
    title: "Saved Domains",
    description: "View and manage domains you're monitoring.",
    href: "/account/saved-domains",
  },
  {
    icon: Bell,
    title: "Notifications",
    description: "Configure alerts for DNS changes",
    href: "/account/notifications",
  },
  {
    icon: BarChart3,
    title: "Usage",
    description: "View your query history, rate limits, and usage stats.",
    href: "/account/usage",
  },
];

export default function AccountPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />

      <main className="flex flex-1 flex-col px-4 py-12">
        <div className="container mx-auto max-w-xl">
          <Link
            href="/"
            className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            <ArrowLeft className="size-4" />
            Back to home
          </Link>
          <h1 className="mb-6 text-3xl font-bold tracking-tight">Account</h1>
          <div className="divide-y rounded-lg border">
            {sections.map((section) => (
              <Link
                key={section.title}
                href={section.href}
                className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/50"
              >
                <section.icon className="size-5 shrink-0 text-muted-foreground" />
                <div className="flex-1">
                  <p className="text-sm font-medium">{section.title}</p>
                  <p className="text-xs text-muted-foreground">
                    {section.description}
                  </p>
                </div>
                <ChevronRight className="size-4 text-muted-foreground" />
              </Link>
            ))}
          </div>
        </div>
      </main>

      <footer className="border-t py-6">
        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
          <p>&copy; {new Date().getFullYear()} VectorDNS</p>
        </div>
      </footer>
    </div>
  );
}