import Link from "next/link";
import { AppShell } from "../../components/app-shell";

const settingsItems = [
  {
    title: "Profile",
    description: "Update company details, contact info, and onboarding fields.",
    href: "/settings/profile",
  },
  {
    title: "Two-Factor Auth",
    description: "Add a TOTP authenticator app for extra security.",
    href: "/settings/2fa",
  },
  {
    title: "Subscription",
    description: "View plan details, upgrade options, and billing cadence.",
    href: "/settings/subscription",
  },
];

export default function SettingsPage() {
  return (
    <AppShell title="Settings" subtitle="Account preferences and plan configuration.">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {settingsItems.map((item) => (
          <Link
            key={item.title}
            href={item.href}
            className="glass-panel p-6 rounded-2xl shadow-sm transition-all hover:-translate-y-1 hover:border-primary/50 group"
          >
            <p className="text-lg font-bold text-foreground group-hover:text-primary transition-colors">{item.title}</p>
            <p className="mt-2 text-sm text-muted-foreground">{item.description}</p>
            <span className="mt-4 inline-flex rounded-full border border-border bg-secondary/50 px-3 py-1 text-xs font-medium text-muted-foreground">
              Open
            </span>
          </Link>
        ))}
      </div>
    </AppShell>
  );
}