'use client'

import { CheckCircle, Package, Truck, Home } from 'lucide-react'

interface TimelineStep {
  status: string
  label: string
  description: string
  date?: string
  completed: boolean
  active: boolean
}

interface OrderTimelineProps {
  currentStatus: string
  orderDate: string
  deliveryDate?: string
}

export default function OrderTimeline({ currentStatus, orderDate, deliveryDate }: OrderTimelineProps) {
  const steps: TimelineStep[] = [
    {
      status: 'placed',
      label: 'Order Placed',
      description: 'Your order has been received',
      date: orderDate,
      completed: true,
      active: true,
    },
    {
      status: 'confirmed',
      label: 'Confirmed',
      description: 'Order confirmed by merchant',
      completed: ['confirmed', 'processing', 'out_for_delivery', 'delivered'].includes(currentStatus),
      active: currentStatus === 'confirmed',
    },
    {
      status: 'processing',
      label: 'Processing',
      description: 'Preparing your items',
      completed: ['processing', 'out_for_delivery', 'delivered'].includes(currentStatus),
      active: currentStatus === 'processing',
    },
    {
      status: 'out_for_delivery',
      label: 'Out for Delivery',
      description: 'Rider is on the way',
      completed: ['out_for_delivery', 'delivered'].includes(currentStatus),
      active: currentStatus === 'out_for_delivery',
    },
    {
      status: 'delivered',
      label: 'Delivered',
      description: 'Order completed',
      date: deliveryDate,
      completed: currentStatus === 'delivered',
      active: currentStatus === 'delivered',
    },
  ]

  return (
    <div className="relative">
      <div className="absolute left-5 top-0 bottom-0 w-px bg-gray-200" />
      
      <div className="space-y-8 relative">
        {steps.map((step, index) => (
          <div key={step.status} className="relative pl-12">
            {/* Icon */}
            <div
              className={`absolute left-0 w-10 h-10 rounded-full flex items-center justify-center ${
                step.completed
                  ? 'bg-primary text-white'
                  : step.active
                  ? 'bg-primary/20 text-primary border-2 border-primary'
                  : 'bg-gray-100 text-gray-custom'
              }`}
            >
              {step.status === 'placed' && <Package size={18} />}
              {step.status === 'confirmed' && <CheckCircle size={18} />}
              {step.status === 'processing' && <Package size={18} />}
              {step.status === 'out_for_delivery' && <Truck size={18} />}
              {step.status === 'delivered' && <Home size={18} />}
            </div>
            
            {/* Content */}
            <div>
              <h4 className={`font-semibold ${step.completed || step.active ? 'text-dark' : 'text-gray-custom'}`}>
                {step.label}
              </h4>
              <p className="text-sm text-gray-custom mt-0.5">{step.description}</p>
              {step.date && (
                <p className="text-xs text-gray-custom mt-1">{step.date}</p>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}