'use client';

import React from 'react';
import { Stack } from '@/ui/Stack';
import { Card } from '@/ui/Card';
import { Text } from '@/ui/Text';
import { LeagueListItem } from '@/components/leagues/LeagueListItem';
import { ProfileSection } from './ProfileSection';

interface League {
  leagueId: string;
  name: string;
  description: string;
  logoUrl?: string;
  memberCount: number;
  roleLabel: string;
}

interface MembershipPanelProps {
  ownedLeagues: League[];
  memberLeagues: League[];
}

export function MembershipPanel({ ownedLeagues, memberLeagues }: MembershipPanelProps) {
  return (
    <Stack gap={8}>
      <ProfileSection 
        title="Leagues You Own" 
        description="Manage the leagues you have created and lead."
      >
        {ownedLeagues.length === 0 ? (
          <Card>
            <Text size="sm" color="text-gray-400">
              You don&apos;t own any leagues yet.
            </Text>
          </Card>
        ) : (
          <Stack gap={3}>
            {ownedLeagues.map((league) => (
              <LeagueListItem key={league.leagueId} league={league} isAdmin />
            ))}
          </Stack>
        )}
      </ProfileSection>

      <ProfileSection 
        title="Leagues You're In" 
        description="Leagues where you are a participating member."
      >
        {memberLeagues.length === 0 ? (
          <Card>
            <Text size="sm" color="text-gray-400">
              You&apos;re not a member of any other leagues yet.
            </Text>
          </Card>
        ) : (
          <Stack gap={3}>
            {memberLeagues.map((league) => (
              <LeagueListItem key={league.leagueId} league={league} />
            ))}
          </Stack>
        )}
      </ProfileSection>
    </Stack>
  );
}