"use client";

/** Pulsing skeleton block */
function Block({ className = "" }: { className?: string }) {
  return <div className={`animate-pulse bg-gray-200 rounded ${className}`} />;
}

/** Skeleton for a single restaurant card */
export function RestaurantCardSkeleton() {
  return (
    <div className="p-3 rounded-xl border border-gray-100 shadow-sm space-y-2">
      <div className="flex items-start justify-between">
        <Block className="h-4 w-3/5" />
        <Block className="h-3 w-10" />
      </div>
      <div className="flex gap-2">
        <Block className="h-5 w-16 rounded" />
        <Block className="h-5 w-14 rounded" />
      </div>
      <Block className="h-3 w-2/3" />
      <div className="flex gap-1">
        <Block className="h-4 w-14 rounded-full" />
      </div>
    </div>
  );
}

/** Skeleton for the restaurant list (multiple cards) */
export function RestaurantListSkeleton({ count = 8 }: { count?: number }) {
  return (
    <div className="p-3 space-y-2">
      {Array.from({ length: count }, (_, i) => (
        <RestaurantCardSkeleton key={i} />
      ))}
    </div>
  );
}

/** Skeleton for restaurant detail view */
export function RestaurantDetailSkeleton() {
  return (
    <div className="p-4 space-y-4 animate-pulse">
      {/* Title + close */}
      <div className="flex justify-between items-start">
        <Block className="h-6 w-40" />
        <Block className="h-6 w-6 rounded" />
      </div>

      {/* Rating */}
      <div className="flex items-center gap-2">
        <Block className="h-4 w-24" />
        <Block className="h-4 w-8" />
      </div>

      {/* Info lines */}
      <div className="space-y-2">
        <Block className="h-4 w-48" />
        <Block className="h-4 w-64" />
        <Block className="h-4 w-36" />
        <Block className="h-4 w-28" />
      </div>

      {/* Videos section */}
      <div className="space-y-3">
        <Block className="h-4 w-20" />
        {[1, 2].map((i) => (
          <div key={i} className="border rounded-lg p-3 space-y-2">
            <div className="flex items-center gap-2">
              <Block className="h-4 w-16 rounded-sm" />
              <Block className="h-3 w-20" />
            </div>
            <Block className="h-4 w-full" />
            <div className="flex gap-1">
              <Block className="h-5 w-14 rounded" />
              <Block className="h-5 w-16 rounded" />
            </div>
            <Block className="h-3 w-3/4" />
          </div>
        ))}
      </div>
    </div>
  );
}