// @design-system: feedback/Skeleton
import { Skeleton } from './Skeleton';

export interface ChatSkeletonProps {
  variant?: 'list' | 'thread';
  /** Number of placeholder rows/bubbles. @default 5 */
  count?: number;
}

export function ChatSkeleton({ variant = 'list', count = 5 }: ChatSkeletonProps) {
  if (variant === 'list') {
    return (
      <ul aria-hidden="true" role="presentation" className="flex flex-col gap-[var(--space-2)]">
        {Array.from({ length: count }).map((_, i) => (
          <li key={i} className="rounded-md bg-[var(--color-surface-raised)] p-[var(--space-4)]">
            <Skeleton variant="text" className="mb-1 w-3/4" />
            <Skeleton variant="text" className="w-1/3" />
          </li>
        ))}
      </ul>
    );
  }
  return (
    <div aria-hidden="true" role="presentation" className="flex flex-col gap-[var(--space-3)]">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className={`flex ${i % 2 === 0 ? 'justify-end' : 'justify-start'}`}>
          <Skeleton
            className={['h-12 rounded-2xl', i % 2 === 0 ? 'ms-auto w-2/5' : 'w-3/5'].join(' ')}
          />
        </div>
      ))}
    </div>
  );
}