import React from 'react';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import LeagueHeader from '@/components/leagues/LeagueHeader';
import { getLeagueRepository, getDriverRepository } from '@/lib/di-container';

export default async function LeagueLayout(props: {
  children: React.ReactNode;
  params: Promise<{ id: string }>;
}) {
  const { children, params } = props;
  const resolvedParams = await params;
  const leagueRepo = getLeagueRepository();
  const driverRepo = getDriverRepository();
  const league = await leagueRepo.findById(resolvedParams.id);

  if (!league) {
    return (
      <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <div className="text-center text-gray-400">League not found</div>
        </div>
      </div>
    );
  }

  const owner = await driverRepo.findById(league.ownerId);
  const ownerName = owner ? owner.name : `${league.ownerId.slice(0, 8)}...`;

  return (
    <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto">
        <Breadcrumbs
          items={[
            { label: 'Home', href: '/' },
            { label: 'Leagues', href: '/leagues' },
            { label: league.name },
          ]}
        />

        <LeagueHeader
          leagueId={league.id}
          leagueName={league.name}
          description={league.description}
          ownerId={league.ownerId}
          ownerName={ownerName}
        />

        <div>{children}</div>
      </div>
    </div>
  );
}