import type { ZonesDeEscalationStep } from '@/shared/types/app';
import { cn } from '@/lib/utils';

interface ZonesQuickFlowProps {
  readonly title: string;
  readonly steps: readonly ZonesDeEscalationStep[];
}

export function ZonesQuickFlow({ title, steps }: ZonesQuickFlowProps) {
  if (!title || steps.length === 0) {
    return null;
  }

  return (
    <section className="bg-white rounded-2xl border border-violet-100 shadow-sm p-5">
      <h3 className="font-semibold text-gray-800 mb-4">{title}</h3>
      <div className="flex flex-col md:flex-row gap-3">
        {steps.map((step) => (
          <div key={step.step} className="flex-1">
            <div className={cn(step.colorClass, 'rounded-xl p-4 border text-center h-full')}>
              <div className="w-8 h-8 rounded-full bg-white/60 flex items-center justify-center mx-auto mb-2 font-bold text-sm">
                {step.step}
              </div>
              <p className="font-semibold text-sm">{step.label}</p>
              <p className="text-[10px] mt-1 opacity-80">{step.description}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
