import { getReportData } from './actions';
import ReportsPageClient from './client';
import AdminNav from '@/components/AdminNav';
import AccountsNav from '@/components/AccountsNav';

export default async function ReportsPage() {
  const data = await getReportData();

  return (
    <div className="mx-auto max-w-4xl px-6 py-12">
      <AdminNav />
      <h1 className="font-display text-3xl">Reports</h1>
      <p className="mt-2 text-sm text-muted">
        Revenue from all sales (website + manual), minus expenses. Helps you see which months are profitable and where money is actually going.
      </p>
      <AccountsNav active="/admin/accounts/reports" />
      <ReportsPageClient data={data} />
    </div>
  );
}
