import React from 'react';
import { useApps } from 'src/services/apps';
import { DashboardCard } from './components';

export const Dashboard: React.FC = () => {
  const { apps, appTableLoading } = useApps();

  return (
    <div className="relative">
      <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8">
        <div className="mt-6 pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
          <h1 className="text-3xl leading-6 font-bold text-gray-900">Dashboard</h1>
        </div>
      </div>
      <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
        <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
          {!appTableLoading && apps.map((app) => <DashboardCard app={app} key={app.name} />)}
        </div>
      </div>
    </div>
  );
};
