import { Card } from '@/ui/Card';
import { FeedList } from '@/ui/FeedList';
import { UpcomingRacesSidebar } from '@/ui/UpcomingRacesSidebar';
import { LatestResultsSidebar } from '@/ui/LatestResultsSidebar';

interface FeedItemData {
  id: string;
  type: string;
  headline: string;
  body?: string;
  timestamp: string;
  formattedTime: string;
  ctaHref?: string;
  ctaLabel?: string;
}

type FeedUpcomingRace = {
  id: string;
  track: string;
  car: string;
  scheduledAt: string | Date;
};

type FeedLatestResult = {
  raceId: string;
  track: string;
  car: string;
  winnerName: string;
  scheduledAt: string | Date;
};

interface FeedLayoutProps {
  feedItems: FeedItemData[];
  upcomingRaces: FeedUpcomingRace[];
  latestResults: FeedLatestResult[];
}

export 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>
  );
}