import { ReactNode } from 'react';
import { Box } from './Box';
import { Glow } from './Glow';
import { Surface } from './Surface';

export interface ProfileHeroProps {
  children: ReactNode;
  glowColor?: 'primary' | 'aqua' | 'purple' | 'amber';
  variant?: 'default' | 'muted';
}

export const ProfileHero = ({ children, glowColor = 'primary', variant = 'default' }: ProfileHeroProps) => {
  return (
    <Box 
      position="relative" 
      bg={variant === 'muted' ? 'var(--ui-color-bg-surface)' : 'var(--ui-color-bg-base)'} 
      style={{ borderBottom: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}
    >
      <Glow color={glowColor} size="xl" opacity={0.1} position="top-right" />
      <Box padding={{ base: 6, md: 10 }} position="relative" zIndex={10}>
        {children}
      </Box>
    </Box>
  );
};

export interface ProfileAvatarProps {
  children: ReactNode;
  badge?: ReactNode;
}

export const ProfileAvatar = ({ children, badge }: ProfileAvatarProps) => {
  return (
    <Box position="relative">
      <Surface 
        variant="muted" 
        rounded="xl" 
        padding={1} 
        style={{ border: '1px solid var(--ui-color-border-default)' }}
      >
        {children}
      </Surface>
      {badge && (
        <Box 
          position="absolute" 
          bottom={-2} 
          right={-2} 
          width={10} 
          height={10} 
          rounded="xl" 
          bg="var(--ui-color-intent-telemetry)" 
          style={{ border: '2px solid var(--ui-color-bg-base)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        >
          {badge}
        </Box>
      )}
    </Box>
  );
};

export interface ProfileStatsGroupProps {
  children: ReactNode;
}

export const ProfileStatsGroup = ({ children }: ProfileStatsGroupProps) => {
  return (
    <Box display="flex" gap={4} marginTop={4}>
      {children}
    </Box>
  );
};

export interface ProfileStatProps {
  label: string;
  value: string | number;
  intent?: 'primary' | 'telemetry' | 'warning' | 'low';
}

import { Text } from './Text';

export const ProfileStat = ({ label, value, intent = 'low' }: ProfileStatProps) => {
  return (
    <Box>
      <Text size="xs" variant="low" uppercase block>{label}</Text>
      <Text size="sm" weight="bold" variant={intent} font="mono">{value}</Text>
    </Box>
  );
};