import { auth, currentUser } from '@clerk/nextjs/server';
import Link from 'next/link';

export default async function DashboardPage() {
  const { userId } = await auth();
  const user = await currentUser();

  return (
    <div>
      <h1 className="text-2xl font-bold">Welcome back, {user?.firstName || 'friend'}</h1>
      <p className="mt-2 text-neutral-600">
        Signed in as <code className="rounded bg-neutral-100 px-1.5 py-0.5">{userId}</code>
      </p>

      <div className="mt-8 grid gap-4 sm:grid-cols-2">
        <Card title="Database" body="Run queries against your Supabase Postgres. See lib/db.ts." />
        <Card title="Subscription" body="Manage your plan via Stripe customer portal.">
          <Link href="/dashboard/billing" className="mt-2 inline-block text-sm underline">
            Open billing →
          </Link>
        </Card>
      </div>
    </div>
  );
}

function Card({ title, body, children }: { title: string; body: string; children?: React.ReactNode }) {
  return (
    <div className="rounded-lg border border-neutral-200 p-6">
      <h2 className="font-semibold">{title}</h2>
      <p className="mt-1 text-sm text-neutral-600">{body}</p>
      {children}
    </div>
  );
}
