interface OrderStatusManagerProps {
  orderId: string;
  currentStatus: string;
  onStatusChange: (status: string) => void;
}

const statuses = [
  { value: 'pending', label: 'รอดำเนินการ', color: 'bg-yellow-100 text-yellow-700' },
  { value: 'confirmed', label: 'ยืนยันแล้ว', color: 'bg-blue-100 text-blue-700' },
  { value: 'processing', label: 'กำลังประมวลผล', color: 'bg-purple-100 text-purple-700' },
  { value: 'shipped', label: 'จัดส่งแล้ว', color: 'bg-orange-100 text-orange-700' },
  { value: 'delivered', label: 'จัดส่งสำเร็จ', color: 'bg-green-100 text-green-700' },
  { value: 'cancelled', label: 'ยกเลิก', color: 'bg-red-100 text-red-700' },
  { value: 'refunded', label: 'คืนเงินแล้ว', color: 'bg-gray-100 text-gray-700' },
];

export default function OrderStatusManager({ orderId, currentStatus, onStatusChange }: OrderStatusManagerProps) {
  const current = statuses.find(s => s.value === currentStatus) || statuses[0];

  return (
    <div className="space-y-3">
      <label className="block text-sm font-medium">สถานะคำสั่งซื้อ</label>
      <select
        value={currentStatus}
        onChange={(e) => onStatusChange(e.target.value)}
        className="w-full border rounded-lg px-3 py-2"
      >
        {statuses.map(status => (
          <option key={status.value} value={status.value}>
            {status.label}
          </option>
        ))}
      </select>
      <div className={`inline-block px-3 py-1 rounded-full text-sm ${current.color}`}>
        {current.label}
      </div>
    </div>
  );
}