import React from "react";

interface OrderCardSkeletonProps {
  count?: number;
}

export default function OrderCardSkeleton({ count = 3 }: OrderCardSkeletonProps) {
  return (
    <div className="space-y-4 animate-pulse">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="bg-white border border-zinc-200 rounded-2xl p-5 md:p-6 shadow-xs flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
          <div className="space-y-3 w-full md:w-2/3">
            <div className="flex items-center gap-3">
              <div className="h-6 bg-zinc-200 rounded-md w-32" />
              <div className="h-6 bg-zinc-200 rounded-md w-20" />
            </div>
            <div className="flex items-center gap-4 text-xs">
              <div className="h-4 bg-zinc-200 rounded-md w-24" />
              <div className="h-4 bg-zinc-200 rounded-md w-16" />
              <div className="h-4 bg-zinc-200 rounded-md w-16" />
            </div>
            <div className="flex flex-wrap gap-2 pt-2">
              <div className="h-7 bg-zinc-200 rounded-lg w-40" />
              <div className="h-7 bg-zinc-200 rounded-lg w-28" />
            </div>
          </div>
          <div className="flex items-center justify-between md:justify-end w-full md:w-auto md:gap-6 pt-4 md:pt-0 border-t md:border-t-0 border-zinc-150">
            <div className="space-y-1 text-left md:text-right">
              <div className="h-3 bg-zinc-200 rounded-md w-24" />
              <div className="h-7 bg-zinc-200 rounded-md w-20" />
            </div>
            <div className="h-10 bg-zinc-200 rounded-lg w-24" />
          </div>
        </div>
      ))}
    </div>
  );
}