'use client';

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

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 (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
      <ProfileSection 
        title="Leagues You Own" 
        description="Manage the leagues you have created and lead."
      >
        {ownedLeagues.length === 0 ? (
          <Card>
            <Text size="sm" variant="low">
              You don&apos;t own any leagues yet.
            </Text>
          </Card>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
            {ownedLeagues.map((league) => (
              <LeagueListItem key={league.leagueId} league={league} isAdmin />
            ))}
          </div>
        )}
      </ProfileSection>

      <ProfileSection 
        title="Leagues You're In" 
        description="Leagues where you are a participating member."
      >
        {memberLeagues.length === 0 ? (
          <Card>
            <Text size="sm" variant="low">
              You&apos;re not a member of any other leagues yet.
            </Text>
          </Card>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
            {memberLeagues.map((league) => (
              <LeagueListItem key={league.leagueId} league={league} />
            ))}
          </div>
        )}
      </ProfileSection>
    </div>
  );
}