import { ArrowRight, Rocket, Users, Wallet } from 'lucide-react'
import { Button } from '../../components/ui'

type WelcomeStepProps = {
  name: string
  onNext: () => void
}

const STEPS_TO_SETUP = [
  {
    icon: Wallet,
    title: 'Conectá tu cuenta de cobro',
    description: 'Mercado Pago o Stripe, en modo prueba por ahora.',
  },
  {
    icon: Users,
    title: 'Creá tu primer grupo',
    description: 'Días, horario, precio y cupo de tu clase.',
  },
  {
    icon: Rocket,
    title: 'Empezá a cobrar',
    description: 'Todo listo para sumar miembros y cobrar al instante.',
  },
]

export function WelcomeStep({ name, onNext }: WelcomeStepProps) {
  return (
    <section className="space-y-6">
      <header className="space-y-2 text-center">
        <span className="mx-auto flex size-14 items-center justify-center rounded-2xl bg-accent-soft">
          <Rocket className="size-7 text-accent" />
        </span>
        <h1 className="text-2xl font-bold text-primary">¡Hola, {name}!</h1>
        <p className="text-sm text-foreground/60">
          Vamos a configurar tu cuenta en 3 pasos. Vas a tardar menos de 5 minutos.
        </p>
      </header>

      <ol className="space-y-3">
        {STEPS_TO_SETUP.map(({ icon: Icon, title, description }) => (
          <li
            key={title}
            className="flex items-center gap-3 rounded-xl border border-border bg-surface p-4"
          >
            <span className="rounded-lg bg-accent-soft p-2">
              <Icon className="size-5 text-accent" />
            </span>
            <div>
              <p className="text-sm font-semibold text-primary">{title}</p>
              <p className="text-xs text-foreground/60">{description}</p>
            </div>
          </li>
        ))}
      </ol>

      <Button variant="primary" size="md" className="w-full" onClick={onNext}>
        Comenzar
        <ArrowRight className="size-4" />
      </Button>
    </section>
  )
}