'use client';

import React from 'react';
import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import { DashboardHero } from '@/ui/DashboardHeroWrapper';
import { NextRaceCard } from '@/ui/NextRaceCardWrapper';
import { ChampionshipStandings } from '@/ui/ChampionshipStandings';
import { ActivityFeed } from '@/ui/ActivityFeed';
import { UpcomingRaces } from '@/ui/UpcomingRaces';
import { FriendsSidebar } from '@/ui/FriendsSidebar';
import { Stack } from '@/ui/Stack';

interface DashboardTemplateProps {
  viewData: DashboardViewData;
}

export function DashboardTemplate({ viewData }: DashboardTemplateProps) {
  const {
    currentDriver,
    nextRace,
    upcomingRaces,
    leagueStandings,
    feedItems,
    friends,
    activeLeaguesCount,
    hasUpcomingRaces,
    hasLeagueStandings,
    hasFeedItems,
    hasFriends,
  } = viewData;

  return (
    <Box as="main">
      <DashboardHero 
        currentDriver={currentDriver} 
        activeLeaguesCount={activeLeaguesCount} 
      />

      <Container size="lg" py={8}>
        <Grid cols={12} gap={6}>
          {/* Left Column - Main Content */}
          <GridItem colSpan={12} lgSpan={8}>
            <Stack gap={6}>
              {nextRace && <NextRaceCard nextRace={nextRace} />}
              {hasLeagueStandings && <ChampionshipStandings standings={leagueStandings} />}
              <ActivityFeed items={feedItems} hasItems={hasFeedItems} />
            </Stack>
          </GridItem>

          {/* Right Column - Sidebar */}
          <GridItem colSpan={12} lgSpan={4}>
            <Stack gap={6}>
              <UpcomingRaces races={upcomingRaces} hasRaces={hasUpcomingRaces} />
              <FriendsSidebar friends={friends} hasFriends={hasFriends} />
            </Stack>
          </GridItem>
        </Grid>
      </Container>
    </Box>
  );
}