import { MembershipPanel } from '@/components/profile/MembershipPanel';
import type { ProfileLeaguesViewData } from '@/lib/view-data/ProfileLeaguesViewData';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';

interface ProfileLeaguesTemplateProps {
  viewData: ProfileLeaguesViewData;
}

export function ProfileLeaguesTemplate({ viewData }: ProfileLeaguesTemplateProps) {
  return (
    <Stack gap={8}>
      <Box as="header">
        <Heading level={1}>My Leagues</Heading>
      </Box>
      
      <Box as="main">
        <MembershipPanel 
          ownedLeagues={viewData.ownedLeagues.map(l => ({
            ...l,
            description: '', // ViewData doesn't have description, but LeagueListItem needs it
            memberCount: 0, // ViewData doesn't have memberCount
            roleLabel: 'Owner'
          }))}
          memberLeagues={viewData.memberLeagues.map(l => ({
            ...l,
            description: '',
            memberCount: 0,
            roleLabel: 'Member'
          }))}
        />
      </Box>
    </Stack>
  );
}