client/src/components/ShootTimeline.jsx

import { Check, Clock, AlertCircle } from 'lucide-react';

const ShootTimeline = ({ steps, currentStep, onStepClick }) => {
  const stepIcons = {
    confirmed: Check,
    in_progress: Clock,
    delivered: Check,
    booked: Clock,
    photos_ready: Check,
  };

  const stepColors = {
    completed: 'bg-green-600 text-white',
    current: 'bg-blue-600 text-white ring-4 ring-blue-200',
    pending: 'bg-gray-300 text-gray-600',
  };

  const getStepStatus = (stepId) => {
    const currentIndex = steps.findIndex(s => s.key === currentStep);
    const stepIndex = steps.findIndex(s => s.key === stepId);

    if (stepIndex < currentIndex) return 'completed';
    if (stepIndex === currentIndex) return 'current';
    return 'pending';
  };

  return (
    <div className="w-full">
      {/* Timeline */}
      <div className="flex items-center justify-between mb-8">
        {steps.map((step, idx) => {
          const status = getStepStatus(step.key);
          const Icon = step.icon;
          const isLast = idx === steps.length - 1;

          return (
            <div key={step.key} className="flex items-center flex-1">
              {/* Step Circle */}
              <button
                onClick={() => onStepClick?.(step.key)}
                className={`flex items-center justify-center w-12 h-12 rounded-full font-bold transition-all flex-shrink-0 ${
                  stepColors[status]
                } ${status === 'pending' ? 'cursor-not-allowed' : 'cursor-pointer hover:shadow-lg'}`}
              >
                {status === 'completed' ? (
                  <Check size={20} />
                ) : (
                  <Icon size={20} />
                )}
              </button>

              {/* Step Label */}
              <div className="ml-3 mr-auto">
                <p className={`font-semibold ${status === 'pending' ? 'text-gray-500' : 'text-gray-900'}`}>
                  {step.label}
                </p>
                {status === 'current' && (
                  <p className="text-xs text-blue-600 font-medium">In Progress</p>
                )}
              </div>

              {/* Connector Line */}
              {!isLast && (
                <div
                  className={`h-1 flex-1 mx-3 rounded-full transition-all ${
                    status === 'completed' ? 'bg-green-600' : 'bg-gray-300'
                  }`}
                />
              )}
            </div>
          );
        })}
      </div>

      {/* Current Step Info */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <p className="text-sm text-blue-900">
          <strong>Current Step:</strong> {steps.find(s => s.key === currentStep)?.label}
        </p>
      </div>
    </div>
  );
};

export default ShootTimeline;