'use client';

import React from 'react';
import { Trophy, Medal, Target, Users, LucideIcon } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';

interface StatBoxProps {
  icon: LucideIcon;
  label: string;
  value: string | number;
  color: string;
}

export function StatBox({ icon, label, value, color }: StatBoxProps) {
  return (
    <Surface variant="muted" rounded="xl" border padding={4} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626', backdropFilter: 'blur(4px)' }}>
      <Stack direction="row" align="center" gap={3}>
        <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: `${color}20`, color }}>
          <Icon icon={icon} size={5} />
        </Surface>
        <Box>
          <Text size="2xl" weight="bold" color="text-white" block>{value}</Text>
          <Text size="xs" color="text-gray-500" block>{label}</Text>
        </Box>
      </Stack>
    </Surface>
  );
}