import { Flag, Star, Trophy, Users } from 'lucide-react';
import { Avatar } from '../../ui/Avatar';
import { Badge } from '../../ui/Badge';
import { Box } from '../../ui/Box';
import { Heading } from '../../ui/Heading';
import { Icon } from '../../ui/Icon';
import { ProfileHero, ProfileAvatar, ProfileStatsGroup, ProfileStat } from '../../ui/ProfileHero';
import { BadgeGroup } from '../../ui/BadgeGroup';
import { QuickStatCard, QuickStatItem } from '../../ui/QuickStatCard';
import { Stack } from '../../ui/Stack';
import React from 'react';

interface DashboardHeroProps {
  driverName: string;
  avatarUrl?: string | null;
  rating: number;
  rank: number;
  totalRaces: number;
  winRate: number;
}

export function DashboardHero({
  driverName,
  avatarUrl,
  rating,
  rank,
  totalRaces,
  winRate,
}: DashboardHeroProps) {
  return (
    <ProfileHero glowColor="aqua">
      <Stack direction="row" align="center" gap={8} wrap>
        {/* Avatar Section */}
        <ProfileAvatar 
          badge={<Icon icon={Star} size={5} intent="high" />}
        >
          <Avatar
            src={avatarUrl || undefined}
            alt={driverName}
            size="xl"
          />
        </ProfileAvatar>

        {/* Info Section */}
        <Box flex={1} minWidth="200px">
          <Heading level={1}>{driverName}</Heading>
          
          <ProfileStatsGroup>
            <ProfileStat label="Rating" value={rating} intent="telemetry" />
            <ProfileStat label="Rank" value={`#${rank}`} intent="warning" />
            <ProfileStat label="Starts" value={totalRaces} intent="low" />
          </ProfileStatsGroup>

          <BadgeGroup>
            <Badge variant="primary" icon={Trophy}>
              {winRate}% Win Rate
            </Badge>
            <Badge variant="info" icon={Flag}>
              Pro License
            </Badge>
            <Badge variant="default" icon={Users}>
              Team Redline
            </Badge>
          </BadgeGroup>
        </Box>

        {/* Quick Stats */}
        <QuickStatCard>
          <QuickStatItem label="Podiums" value="12" />
          <QuickStatItem label="Wins" value="4" />
        </QuickStatCard>
      </Stack>
    </ProfileHero>
  );
}