"use client";

export function OrderCardSkeleton() {
  return (
    <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
      <div className="px-6 py-4">
        <div className="animate-pulse flex items-start justify-between gap-6">
          {/* Left section: Icon + Service info + Status */}
          <div className="flex items-start gap-3 flex-1 min-w-0">
            <div className="h-10 w-10 rounded-lg bg-slate-100 flex-shrink-0" />
            <div className="flex-1 min-w-0 space-y-3">
              {/* Service name + Status pill inline */}
              <div className="flex items-center gap-2 flex-wrap">
                <div className="h-5 w-32 rounded bg-slate-200" />
                <div className="h-5 w-20 rounded-full bg-slate-200" />
              </div>
              {/* Order number and date */}
              <div className="h-3 w-40 rounded bg-slate-100" />
              {/* Display items */}
              <div className="flex flex-wrap gap-2">
                <div className="h-6 w-24 rounded-md bg-slate-100" />
                <div className="h-6 w-20 rounded-md bg-slate-100" />
                <div className="h-6 w-16 rounded-md bg-slate-50" />
              </div>
            </div>
          </div>

          {/* Right section: Pricing */}
          <div className="flex items-start gap-4 flex-shrink-0">
            <div className="text-right space-y-1">
              <div className="h-2 w-16 rounded bg-slate-100" />
              <div className="h-6 w-20 rounded bg-slate-200" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default OrderCardSkeleton;
