'use client';

import React from 'react';

/**
 * DS1 (DESIGN-SPEC §4 — "kill loading walls") — the single skeleton primitive.
 *
 * Governing law: premium = SPEED + RESTRAINT. A text-wall loader ("Loading…")
 * reads cheap; a layout-matched skeleton reads instant. This is a tokenized
 * dark shimmer block (`.vyndr-skeleton` in globals.css) — the sweep is chrome,
 * never data, and the global prefers-reduced-motion rule freezes it to a
 * still, visible surface.
 */
export function Skeleton({
  height = 16,
  width = '100%',
  radius = 8,
  style,
  className = '',
}: {
  height?: number | string;
  width?: number | string;
  radius?: number | string;
  style?: React.CSSProperties;
  className?: string;
}) {
  return (
    <div
      aria-hidden="true"
      className={`vyndr-skeleton ${className}`.trim()}
      style={{ height, width, borderRadius: radius, ...style }}
    />
  );
}

/**
 * A row of card-shaped skeletons — matches horizontal-scroll grade/slate rows.
 */
export function SkeletonCards({ count = 4, height = 110, minWidth = 200 }: { count?: number; height?: number; minWidth?: number }) {
  return (
    <div style={{ display: 'flex', gap: 12 }} aria-hidden="true">
      {Array.from({ length: count }).map((_, i) => (
        <Skeleton key={i} height={height} width={minWidth} radius={16} style={{ minWidth, flex: '0 0 auto' }} />
      ))}
    </div>
  );
}

/**
 * A stack of full-width row skeletons — matches list/grid loading states
 * (the slate, the ledger, the desk pack).
 */
export function SkeletonList({ count = 4, height = 80, gap = 12 }: { count?: number; height?: number; gap?: number }) {
  return (
    <div style={{ display: 'grid', gap }} aria-hidden="true">
      {Array.from({ length: count }).map((_, i) => (
        <Skeleton key={i} height={height} radius={16} />
      ))}
    </div>
  );
}

export default Skeleton;
