/**
 * ServiceCardSkeleton Component
 * 
 * Pulse skeleton fallback for ServiceCard during Streaming / Suspense
 */

import { Card } from '../primitives/card';

export function ServiceCardSkeleton() {
  return (
    <Card className="overflow-hidden animate-pulse">
      {/* Image Skeleton */}
      <div className="aspect-[4/3] bg-surface-soft w-full" />

      {/* Content Skeleton */}
      <div className="p-4 space-y-3">
        {/* Title */}
        <div className="h-5 bg-border rounded-md w-4/5" />
        <div className="h-4 bg-border-strong/30 rounded-md w-2/3" />

        {/* Description lines */}
        <div className="space-y-1.5 pt-1">
          <div className="h-3 bg-surface-soft rounded w-full" />
          <div className="h-3 bg-surface-soft rounded w-5/6" />
        </div>

        {/* Price & Rating */}
        <div className="flex items-center justify-between pt-2">
          <div className="h-6 bg-border rounded-md w-24" />
          <div className="h-4 bg-surface-soft rounded w-12" />
        </div>
      </div>
    </Card>
  );
}