'use client';

import { ProgressBar } from '@/ui/ProgressBar';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Trophy } from 'lucide-react';

interface SeasonProgressWidgetProps {
  completedRaces: number;
  totalRaces: number;
  percentage: number;
}

export function SeasonProgressWidget({
  completedRaces,
  totalRaces,
  percentage,
}: SeasonProgressWidgetProps) {
  return (
    <Surface
      variant="muted"
      rounded="xl"
      border
      padding={6}
      style={{
        background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
        borderColor: 'rgba(34, 197, 94, 0.3)',
      }}
    >
      <Stack gap={4}>
        {/* Header */}
        <Stack direction="row" align="center" gap={3}>
          <Stack
            display="flex"
            h="10"
            w="10"
            alignItems="center"
            justifyContent="center"
            rounded="lg"
            bg="bg-performance-green/10"
          >
            <Trophy size={20} color="var(--performance-green)" />
          </Stack>
          <Stack gap={0}>
            <Text size="sm" weight="bold" color="text-white" block>
              Season Progress
            </Text>
            <Text size="xs" color="text-gray-400" block>
              Race {completedRaces} of {totalRaces}
            </Text>
          </Stack>
        </Stack>

        {/* Progress Bar */}
        <Stack gap={2}>
          <ProgressBar
            value={percentage}
            intent="success"
            size="lg"
          />
          <Stack direction="row" justify="between" align="center">
            <Text size="xs" color="text-gray-500">
              {percentage}% Complete
            </Text>
            <Text size="xs" color="text-performance-green" weight="bold">
              {completedRaces}/{totalRaces} Races
            </Text>
          </Stack>
        </Stack>

        {/* Visual Indicator */}
        <Stack
          rounded="lg"
          bg="bg-performance-green/10"
          border
          borderColor="border-performance-green/30"
          p={3}
        >
          <Text size="xs" color="text-performance-green" weight="medium" block>
            {percentage >= 100
              ? 'Season Complete! 🏆'
              : percentage >= 50
              ? 'Over halfway there! 🚀'
              : 'Season underway! 🏁'}
          </Text>
        </Stack>
      </Stack>
    </Surface>
  );
}
