import { Section } from '@/ui/Section';
import { Layout } from '@/ui/Layout';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import Breadcrumbs from '@/components/layout/Breadcrumbs';

interface Tab {
  label: string;
  href: string;
  exact?: boolean;
}

interface LeagueDetailTemplateProps {
  leagueId: string;
  leagueName: string;
  leagueDescription: string;
  tabs: Tab[];
  children: React.ReactNode;
}

export function LeagueDetailTemplate({
  leagueId,
  leagueName,
  leagueDescription,
  tabs,
  children,
}: LeagueDetailTemplateProps) {
  return (
    <Layout>
      <Section>
        <Breadcrumbs
          items={[
            { label: 'Home', href: '/' },
            { label: 'Leagues', href: '/leagues' },
            { label: leagueName },
          ]}
        />

        <Section>
          <Text size="3xl" weight="bold" className="text-white">
            {leagueName}
          </Text>
          <Text size="base" className="text-gray-400 mt-2">
            {leagueDescription}
          </Text>
        </Section>

        <Section>
          <div className="flex gap-6 overflow-x-auto">
            {tabs.map((tab) => (
              <Link
                key={tab.href}
                href={tab.href}
                className="pb-3 px-1 font-medium whitespace-nowrap transition-colors text-gray-400 hover:text-white"
              >
                {tab.label}
              </Link>
            ))}
          </div>
        </Section>

        <Section>
          {children}
        </Section>
      </Section>
    </Layout>
  );
}