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

const USER_ROLES = [
  {
    icon: Car,
    title: 'Driver',
    description: 'Race, track stats, join teams',
    intent: 'primary' as const,
  },
  {
    icon: Trophy,
    title: 'League Admin',
    description: 'Organize leagues and events',
    intent: 'success' as const,
  },
  {
    icon: Users,
    title: 'Team Manager',
    description: 'Manage team and drivers',
    intent: 'telemetry' as const,
  },
] as const;

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

export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
  if (variant === 'compact') {
    return (
      <div style={{ marginTop: '2rem' }}>
        <Text align="center" size="xs" variant="low" block marginBottom={4}>
          One account for all roles
        </Text>
        <div style={{ display: 'flex', justifyContent: 'center', gap: '1.5rem' }}>
          {USER_ROLES.map((role) => (
            <div key={role.title} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.25rem' }}>
              <div style={{ width: '2rem', height: '2rem', borderRadius: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon icon={role.icon} size={4} intent={role.intent} />
              </div>
              <Text size="xs" variant="low">{role.title}</Text>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginBottom: '2rem' }}>
      {USER_ROLES.map((role, index) => (
        <motion.div
          key={role.title}
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: index * 0.1 }}
        >
          <ListItem>
            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
              <div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon icon={role.icon} size={5} intent={role.intent} />
              </div>
              <ListItemInfo
                title={role.title}
                description={role.description}
              />
            </div>
          </ListItem>
        </motion.div>
      ))}
    </div>
  );
}