import Card from '@/components/ui/Card';
import type { FeedItemDTO } from '@core/social/application/dto/FeedItemDTO';
import type { Race } from '@core/racing/domain/entities/Race';
import type { RaceWithResultsDTO } from '@core/testing-support';
import FeedList from '@/components/feed/FeedList';
import UpcomingRacesSidebar from '@/components/races/UpcomingRacesSidebar';
import LatestResultsSidebar from '@/components/races/LatestResultsSidebar';

interface FeedLayoutProps {
  feedItems: FeedItemDTO[];
  upcomingRaces: Race[];
  latestResults: RaceWithResultsDTO[];
}

export default function FeedLayout({
  feedItems,
  upcomingRaces,
  latestResults
}: FeedLayoutProps) {
  return (
    <section className="max-w-7xl mx-auto mt-16 mb-20">
      <div className="flex flex-col gap-8 lg:grid lg:grid-cols-3">
        <div className="lg:col-span-2 space-y-4">
          <div className="flex items-baseline justify-between gap-4">
            <div>
              <h2 className="text-2xl font-semibold text-white">Activity</h2>
              <p className="text-sm text-gray-400">
                See what your friends and leagues are doing right now.
              </p>
            </div>
          </div>
          <Card className="bg-iron-gray/80">
            <FeedList items={feedItems} />
          </Card>
        </div>
        <aside className="space-y-6">
          <UpcomingRacesSidebar races={upcomingRaces} />
          <LatestResultsSidebar results={latestResults} />
        </aside>
      </div>
    </section>
  );
}