import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@kit/ui/card';

import { loadAdminDashboard } from '../lib/server/loaders/admin-dashboard.loader';

export async function AdminDashboard() {
  const data = await loadAdminDashboard();

  return (
    <div
      className={
        'grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3' +
        ' xl:grid-cols-4'
      }
    >
      <Card className="flex flex-col">
        <CardHeader className="flex-1">
          <CardTitle>Users</CardTitle>

          <CardDescription>
            The number of personal accounts that have been created.
          </CardDescription>
        </CardHeader>

        <CardContent>
          <div className={'flex justify-between'}>
            <Figure>{data.accounts}</Figure>
          </div>
        </CardContent>
      </Card>

      <Card className="flex flex-col">
        <CardHeader className="flex-1">
          <CardTitle>Company Accounts</CardTitle>

          <CardDescription>
            The number of company accounts that have been created.
          </CardDescription>
        </CardHeader>

        <CardContent>
          <div className={'flex justify-between'}>
            <Figure>{data.teamAccounts}</Figure>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

function Figure(props: React.PropsWithChildren) {
  return <div className={'text-3xl font-bold'}>{props.children}</div>;
}