import React from 'react';
import { motion } from 'framer-motion';
import { Car, Trophy, Users } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';

const USER_ROLES = [
  {
    icon: Car,
    title: 'Driver',
    description: 'Race, track stats, join teams',
    color: 'primary-blue',
  },
  {
    icon: Trophy,
    title: 'League Admin',
    description: 'Organize leagues and events',
    color: 'performance-green',
  },
  {
    icon: Users,
    title: 'Team Manager',
    description: 'Manage team and drivers',
    color: 'purple-400',
  },
] as const;

interface UserRolesPreviewProps {
  variant?: 'full' | 'compact';
}

export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
  if (variant === 'compact') {
    return (
      <Box mt={8} display={{ base: 'block', lg: 'none' }}>
        <Text align="center" size="xs" color="text-gray-500" mb={4} block>
          One account for all roles
        </Text>
        <Stack direction="row" justify="center" gap={6}>
          {USER_ROLES.map((role) => (
            <Stack key={role.title} direction="col" align="center">
              <Box 
                width="8" 
                height="8" 
                rounded="lg" 
                bg={`bg-${role.color}/20`} 
                display="flex" 
                alignItems="center" 
                justifyContent="center" 
                mb={1}
              >
                <Text color={`text-${role.color}`}>
                  <Icon icon={role.icon} size={4} />
                </Text>
              </Box>
              <Text size="xs" color="text-gray-500">{role.title}</Text>
            </Stack>
          ))}
        </Stack>
      </Box>
    );
  }

  return (
    <Stack direction="col" gap={3} mb={8}>
      {USER_ROLES.map((role, index) => (
        <Box
          as={motion.div}
          key={role.title}
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: index * 0.1 }}
          display="flex"
          alignItems="center"
          gap={4}
          p={4}
          rounded="xl"
          bg="bg-iron-gray/50"
          border
          borderColor="border-charcoal-outline"
        >
          <Box 
            width="10" 
            height="10" 
            rounded="lg" 
            bg={`bg-${role.color}/20`} 
            display="flex" 
            alignItems="center" 
            justifyContent="center"
          >
            <Text color={`text-${role.color}`}>
              <Icon icon={role.icon} size={5} />
            </Text>
          </Box>
          <Box>
            <Heading level={4}>{role.title}</Heading>
            <Text size="sm" color="text-gray-500">{role.description}</Text>
          </Box>
        </Box>
      ))}
    </Stack>
  );
}