import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

/**
 * 商品卡骨架屏 - 在 Dify 流式返回 picks 前展示，避免空白等待
 */
export const ProductCardSkeleton = () => (
  <Card className="w-full max-w-sm bg-card border-border overflow-hidden">
    <Skeleton className="aspect-square w-full" />
    <div className="p-4 space-y-3">
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-3 w-full" />
      <Skeleton className="h-3 w-5/6" />
      <div className="flex items-center justify-between pt-2">
        <Skeleton className="h-6 w-20" />
        <Skeleton className="h-8 w-16 rounded-md" />
      </div>
    </div>
  </Card>
);

interface Props {
  count?: number;
}

export const ProductCardSkeletonRow = ({ count = 3 }: Props) => (
  <div className="flex flex-col gap-3 animate-in fade-in duration-300">
    <div className="text-xs text-muted-foreground px-1">正在为您挑选商品...</div>
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      {Array.from({ length: count }).map((_, i) => (
        <ProductCardSkeleton key={i} />
      ))}
    </div>
  </div>
);
