// @design-system: feedback/Skeleton
'use client';
import { useState, useEffect, type ReactNode } from 'react';

export interface SkeletonGuardProps {
  /** Delay in ms before skeleton appears. 0 = immediate. @default 200 */
  delay?: number;
  children: ReactNode;
}

/**
 * SkeletonGuard — suppresses flash-of-skeleton for fast fetches.
 *
 * Renders null until `delay` ms have elapsed, then reveals children.
 * Use delay={0} for known-slow full-page loads where showing skeleton
 * immediately is better than a blank 200 ms gap.
 */
export function SkeletonGuard({ delay = 200, children }: SkeletonGuardProps) {
  const [show, setShow] = useState(delay === 0);

  useEffect(() => {
    if (delay === 0) return;
    const id = setTimeout(() => setShow(true), delay);
    return () => clearTimeout(id);
  }, [delay]);

  return show ? <>{children}</> : null;
}