import React from 'react';
import { cn } from '@/lib/utils';

export function ViolationStatusTimeline({ currentStage, history }) {
  const stages = ['first_notice', 'second_notice', 'third_final_notice', 'fined'];
  // Map friendly labels
  const labels = {
    'first_notice': '1st Notice',
    'second_notice': '2nd Notice',
    'third_final_notice': 'Final Notice',
    'fined': 'Fined'
  };
  
  // If status is resolved, we might want to show that too, but timeline is usually for progression
  // If currentStage is not in the list (e.g. 'resolved'), show it as completed or outside
  let currentIndex = stages.indexOf(currentStage);
  if (currentIndex === -1) {
     if (currentStage === 'resolved') currentIndex = stages.length; // All done? Or handled differently.
     else currentIndex = 0; // Default start
  }

  return (
    <div className="w-full pt-2 pb-6 px-1">
      <div className="flex items-center justify-between w-full relative">
         {/* Line Background */}
         <div className="absolute top-1.5 left-0 w-full h-0.5 bg-slate-200 -z-10" />
         
         {/* Line Progress */}
         <div 
            className="absolute top-1.5 left-0 h-0.5 bg-blue-600 -z-10 transition-all duration-500" 
            style={{ width: `${(currentIndex / (stages.length - 1)) * 100}%` }}
         />

         {stages.map((stage, index) => {
           const isCompleted = index <= currentIndex;
           const isCurrent = index === currentIndex;
           
           return (
             <div key={stage} className="flex flex-col items-center group relative">
                <div className={cn(
                  "w-3.5 h-3.5 rounded-full border-2 flex items-center justify-center bg-white z-10 transition-colors",
                  isCompleted ? "border-blue-600 bg-blue-600" : "border-slate-300"
                )}>
                   {isCompleted && <div className="w-1 h-1 bg-white rounded-full" />}
                </div>
                
                <span className={cn(
                  "absolute top-5 whitespace-nowrap text-[10px] font-medium transition-colors",
                  isCurrent ? "text-blue-700 scale-110" : "text-slate-400",
                  isCompleted && !isCurrent ? "text-slate-600" : ""
                )}>
                  {labels[stage] || stage}
                </span>
             </div>
           );
         })}
      </div>
    </div>
  );
}