import { useModules } from '@/modules';
import { Card } from '@dreamtree-org/twreact-ui';
import { useAuth } from '@rbac/useCan';

export default function Dashboard() {
  const user = useAuth();
  const mods = Object.values(useModules());
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Welcome{user && user.name ? `, ${user.name}` : ''}</h1>
        <p className="text-secondary-500">
          {user && user.isAdmin ? 'Tenant admin' : 'Member'} · {(user && user.permissions && user.permissions.length) || 0} permissions
        </p>
      </div>
      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {mods.map((m) => (
          <Card key={m.key} hover className="p-4">
            <div className="font-semibold">{m.label}</div>
            <div className="text-sm text-secondary-500">{(m.models || []).join(', ') || '—'}</div>
          </Card>
        ))}
      </div>
    </div>
  );
}