import type { CSSProperties } from 'react';

interface SkeletonProps {
	style?: CSSProperties;
	lines?: number;
}

/**
 * A skeleton placeholder block (`.skel`).
 * @param root0
 * @param root0.style
 * @param root0.lines
 */
export const Skeleton = ( { style, lines = 1 }: SkeletonProps ) => {
	if ( lines <= 1 ) {
		return <div className="skel" style={ style }></div>;
	}

	return (
		<div className="scds-skeleton-lines" aria-hidden="true">
			{ Array.from( { length: lines } ).map( ( _, index ) => (
				<div
					className="skel"
					key={ index }
					style={ {
						height: '14px',
						width: `${ Math.max( 48, 92 - index * 14 ) }%`,
						...style,
					} }
				></div>
			) ) }
		</div>
	);
};

/**
 * Labeled loading region with shared skeleton visuals.
 * @param root0
 * @param root0.label
 * @param root0.children
 */
export const LoadingState = ( {
	label,
	children,
}: {
	label: string;
	children: JSX.Element;
} ) => (
	<div
		className="scds-loading-state"
		aria-busy="true"
		aria-live="polite"
		role="status"
	>
		<span className="screen-reader-text">{ label }</span>
		{ children }
	</div>
);

/**
 * A calm spinner (`.spinner`).
 * @param root0
 * @param root0.label
 */
export const Spinner = ( { label = 'Loading' }: { label?: string } ) => (
	<div className="spinner" role="status" aria-label={ label }></div>
);
