ossm-configurator/website/src/components/steps/MotorStep.jsx

import partsData from '../../data/index.js';
import { formatPrice } from '../../utils/priceFormat';

export default function MotorStep({ config, updateConfig }) {
  const selectedMotorId = config.motor?.id;

  const handleSelect = (motor) => {
    updateConfig({ motor });
  };

  const recommendedMotors = partsData.motors.filter(m => m.recommended);
  const otherMotors = partsData.motors.filter(m => !m.recommended);
  const hasSingleRecommended = recommendedMotors.length === 1;

  const renderMotorCard = (motor, isRecommended = false, isSlightlyLarger = false) => (
    <button
      key={motor.id}
      onClick={() => handleSelect(motor)}
      className={`${isSlightlyLarger ? 'p-5' : 'p-4'} border-2 rounded-lg text-left transition-all ${
        selectedMotorId === motor.id
          ? 'border-blue-600 bg-blue-50 shadow-lg'
          : motor.recommended
          ? 'border-green-500 bg-green-50 hover:border-green-600 hover:bg-green-100'
          : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
      }`}
    >
      {motor.recommended && (
        <div className="mb-3 flex items-center gap-2">
          <span className="inline-flex items-center px-3 py-1 text-xs font-semibold text-green-800 bg-green-200 rounded-full">
            ⭐ Recommended
          </span>
        </div>
      )}
      {motor.image && (
        <div className={`${isSlightlyLarger ? 'mb-4' : 'mb-3'} flex justify-center`}>
          <img
            src={motor.image}
            alt={motor.name}
            className={`${isSlightlyLarger ? 'h-32 w-32' : 'h-24 w-24'} object-contain rounded-lg bg-gray-100`}
            onError={(e) => {
              e.target.style.display = 'none';
            }}
          />
        </div>
      )}
      <div className="flex items-start justify-between mb-2">
        <h3 className={`${isSlightlyLarger ? 'text-lg' : 'text-base'} font-semibold text-gray-900`}>
          {motor.name}
        </h3>
        {selectedMotorId === motor.id && (
          <div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center flex-shrink-0">
            <svg
              className="w-4 h-4 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M5 13l4 4L19 7"
              />
            </svg>
          </div>
        )}
      </div>
      <p className={`${isSlightlyLarger ? 'text-sm' : 'text-sm'} text-gray-600 mb-3`}>{motor.description}</p>
      <div className={`flex ${isSlightlyLarger ? 'gap-4' : 'gap-3'} text-sm`}>
        <div>
          <span className="text-gray-500">Speed:</span>{' '}
          <span className="font-medium">{motor.speed}</span>
        </div>
        <div>
          <span className="text-gray-500">Wattage:</span>{' '}
          <span className="font-medium">{motor.wattage}</span>
        </div>
        <div>
          <span className="text-gray-500">Gear Count:</span>{' '}
          <span className="font-medium">{motor.gear_count}</span>
        </div>
      </div>
      <div className={`${isSlightlyLarger ? 'mt-3' : 'mt-2'} flex items-center justify-between`}>
        <div className={`${isSlightlyLarger ? 'text-lg' : 'text-lg'} font-bold text-blue-600`}>
          {formatPrice(motor.price)}
        </div>
      </div>
      {motor.links && motor.links.length > 0 && (
        <div className={`${isSlightlyLarger ? 'mt-3' : 'mt-2'} pt-3 border-t border-gray-200`}>
          <p className="text-xs text-gray-500 mb-2">Buy from:</p>
          <div className="flex flex-wrap gap-2">
            {motor.links.map((link, index) => (
              <a
                key={index}
                href={link.link}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-md hover:bg-blue-100 hover:text-blue-800 transition-colors"
                onClick={(e) => e.stopPropagation()}
              >
                <svg
                  className="w-3 h-3 mr-1.5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                  />
                </svg>
                {link.store}
              </a>
            ))}
          </div>
        </div>
      )}
    </button>
  );

  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Select Motor</h2>
      <p className="text-gray-600 mb-6">
        Choose the stepper motor for your OSSM build.
      </p>

      {/* Recommended Motor(s) */}
      {recommendedMotors.length > 0 && (
        <div className={`mb-8 ${hasSingleRecommended ? 'flex justify-center' : ''}`}>
          {hasSingleRecommended ? (
            <div className="w-full max-w-md">
              {renderMotorCard(recommendedMotors[0], true, true)}
            </div>
          ) : (
            <div>
              <h3 className="text-lg font-semibold mb-4 text-gray-700">Recommended Options</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {recommendedMotors.map((motor) => renderMotorCard(motor, true, false))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Other Motors - Smaller Grid */}
      {otherMotors.length > 0 && (
        <div>
          <h3 className="text-lg font-semibold mb-4 text-gray-700">Other Options</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {otherMotors.map((motor) => renderMotorCard(motor, false, false))}
          </div>
        </div>
      )}
    </div>
  );
}