'use client';

import React from 'react';
import { 
  UserPlus, 
  Link as LinkIcon, 
  Settings,
  Trophy,
  Car,
} from 'lucide-react';
import { WorkflowMockup, WorkflowStep } from '@/ui/WorkflowMockup';

const WORKFLOW_STEPS: WorkflowStep[] = [
  {
    id: 1,
    icon: UserPlus,
    title: 'Create Account',
    description: 'Sign up with email or connect iRacing',
    color: 'text-primary-blue',
  },
  {
    id: 2,
    icon: LinkIcon,
    title: 'Link iRacing',
    description: 'Connect your iRacing profile for stats',
    color: 'text-purple-400',
  },
  {
    id: 3,
    icon: Settings,
    title: 'Configure Profile',
    description: 'Set up your racing preferences',
    color: 'text-warning-amber',
  },
  {
    id: 4,
    icon: Trophy,
    title: 'Join Leagues',
    description: 'Find and join competitive leagues',
    color: 'text-performance-green',
  },
  {
    id: 5,
    icon: Car,
    title: 'Start Racing',
    description: 'Compete and track your progress',
    color: 'text-primary-blue',
  },
];

export function AuthWorkflowMockup() {
  return <WorkflowMockup steps={WORKFLOW_STEPS} />;
}