import React from 'react';
import { WizardStep } from '../../../ui/WizardModal/WizardModal';

export const CustomerOrderWizardSteps = (
  data: Record<string, any>,
  setData: (data: Record<string, any>) => void
): WizardStep[] => [
  {
    id: 'customer-selection',
    title: 'Seleccionar Cliente',
    description: 'Buscar o crear cliente',
    component: (props) => (
      <div className="text-center py-12">
        <p className="text-[var(--text-secondary)]">
          Wizard de Pedido - Selección o creación de cliente
        </p>
        <button onClick={props.onNext} className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg">
          Continuar
        </button>
      </div>
    ),
  },
  {
    id: 'order-items',
    title: 'Productos del Pedido',
    description: 'Agregar productos y cantidades',
    component: (props) => (
      <div className="text-center py-12">
        <p className="text-[var(--text-secondary)]">
          Selección de productos y cantidades
        </p>
        <button onClick={props.onNext} className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg">
          Continuar
        </button>
      </div>
    ),
  },
  {
    id: 'delivery-payment',
    title: 'Entrega y Pago',
    description: 'Fecha de entrega y forma de pago',
    component: (props) => (
      <div className="text-center py-12">
        <p className="text-[var(--text-secondary)]">
          Configuración de entrega y pago
        </p>
        <button onClick={props.onComplete} className="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg">
          Finalizar
        </button>
      </div>
    ),
  },
];