import { memo } from "react";
import { Badge } from "~/components/ui/badge";

interface SidebarRecentPicksProps {
  picks: Array<{
    id: string;
    pickNumber: number;
    round: number;
    participant: {
      name: string;
    };
    sport: {
      name: string;
    };
    team: {
      name: string;
    };
  }>;
}

export const SidebarRecentPicks = memo(function SidebarRecentPicks({ picks }: SidebarRecentPicksProps) {
  return (
    <div className="p-4">
      {picks.length === 0 ? (
        <p className="text-muted-foreground text-sm text-center py-8">
          No picks yet...
        </p>
      ) : (
        <div className="space-y-1.5">
          {picks
            .slice()
            .toReversed()
            .map((pick) => (
              <div
                key={pick.id}
                className="flex items-center justify-between p-2 bg-muted rounded-lg text-sm"
              >
                <div className="flex items-center gap-2 min-w-0 flex-1">
                  <Badge variant="outline" className="text-xs flex-shrink-0">
                    #{pick.pickNumber}
                  </Badge>
                  <div className="min-w-0 flex-1">
                    <p className="font-semibold truncate">{pick.participant.name}</p>
                    <p className="text-xs text-muted-foreground truncate">
                      {pick.sport.name}
                    </p>
                    <p className="text-xs text-muted-foreground truncate">
                      {pick.team.name}
                    </p>
                  </div>
                </div>
              </div>
            ))}
        </div>
      )}
    </div>
  );
});