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

export const RecipeWizardSteps = (
  data: Record<string, any>,
  setData: (data: Record<string, any>) => void
): WizardStep[] => [
  {
    id: 'recipe-details',
    title: 'Detalles de la Receta',
    description: 'Nombre, categoría, rendimiento',
    component: (props) => (
      <div className="text-center py-12">
        <p className="text-[var(--text-secondary)]">
          Wizard de Receta - Información básica de la receta
        </p>
        <button onClick={props.onNext} className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg">
          Continuar
        </button>
      </div>
    ),
  },
  {
    id: 'recipe-ingredients',
    title: 'Ingredientes',
    description: 'Selecciona ingredientes del inventario',
    component: (props) => (
      <div className="text-center py-12">
        <p className="text-[var(--text-secondary)]">
          Selección de ingredientes con 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: 'recipe-quality',
    title: 'Calidad',
    description: 'Plantillas de calidad aplicables',
    component: (props) => (
      <div className="text-center py-12">
        <p className="text-[var(--text-secondary)]">
          Asignación de plantillas de calidad
        </p>
        <button onClick={props.onComplete} className="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg">
          Finalizar
        </button>
      </div>
    ),
    isOptional: true,
  },
];