'use client';

import React from 'react';
import { TeamCard as UiTeamCard } from '@/ui/TeamCard';
import { TeamSummaryData } from '@/lib/view-data/TeamsViewData';
import { Image } from '@/ui/Image';

interface TeamCardProps {
  team?: TeamSummaryData;
  // Compatibility props
  name?: string;
  leagueName?: string;
  logo?: string;
  memberCount?: number;
  ratingLabel?: string;
  winsLabel?: string;
  racesLabel?: string;
  region?: string;
  isRecruiting?: boolean;
  performanceLevel?: string;
  description?: string;
  onClick?: (id: string) => void;
}

export function TeamCard({ 
  team, 
  name,
  leagueName,
  logo,
  memberCount,
  ratingLabel,
  winsLabel,
  racesLabel,
  region,
  isRecruiting,
  performanceLevel,
  description,
  onClick 
}: TeamCardProps) {
  const data = team || {
    teamId: '',
    teamName: name || '',
    leagueName: leagueName || '',
    memberCount: memberCount || 0,
    logoUrl: logo,
    ratingLabel: ratingLabel || '-',
    winsLabel: winsLabel || '-',
    racesLabel: racesLabel || '-',
    region: region,
    isRecruiting: isRecruiting || false,
    performanceLevel: performanceLevel,
    description: description,
  };

  return (
    <UiTeamCard
      name={data.teamName}
      leagueName={data.leagueName}
      logo={data.logoUrl ? <Image src={data.logoUrl} alt={data.teamName} fullWidth fullHeight objectFit="cover" /> : undefined}
      memberCount={data.memberCount}
      rating={data.ratingLabel}
      wins={data.winsLabel}
      races={data.racesLabel}
      region={data.region}
      isRecruiting={data.isRecruiting}
      performanceLevel={data.performanceLevel}
      description={data.description}
      onClick={() => onClick?.(data.teamId)}
    />
  );
}