import { Empty } from 'antd';
import type { DesktopViewport } from '../../../hooks/useDesktopViewport';
import { desktopViewportClass } from '../../../hooks/useDesktopViewport';
import type { TeamsPageLogicOutput } from '../TeamsPageLogic';
import TeamsPageWebDetail from './TeamsPageWebDetail';
import TeamsPageWebHero from './TeamsPageWebHero';
import TeamsPageWebList from './TeamsPageWebList';
import TeamsPageWebModals from './TeamsPageWebModals';
import '../styles/teams-page-web.css';

export interface TeamsPageWebVariantProps {
  logic: TeamsPageLogicOutput;
  viewport: DesktopViewport;
}

export default function TeamsPageWebBase({ logic, viewport }: TeamsPageWebVariantProps) {
  return (
    <div className="feature-cover-container">
      <div className={`page-container teams-page-web ${desktopViewportClass(viewport)}`}>
        <TeamsPageWebHero logic={logic} />
        <div className="teams-page-web-main-grid">
          <TeamsPageWebList logic={logic} />
          <TeamsPageWebDetail logic={logic} />
        </div>
        <TeamsPageWebModals logic={logic} />
      </div>
    </div>
  );
}