import type { CSSProperties } from 'react';

interface SkeletonBlockProps {
  width?: number | string;
  height?: number | string;
  radius?: number;
  style?: CSSProperties;
}

export function SkeletonBlock({
  width = '100%',
  height = 12,
  radius = 999,
  style,
}: SkeletonBlockProps) {
  return (
    <span
      aria-hidden="true"
      style={{
        display: 'block',
        width,
        height,
        borderRadius: radius,
        background: 'linear-gradient(90deg, #F3F4F6 0%, #E5E7EB 45%, #F3F4F6 100%)',
        ...style,
      }}
    />
  );
}

export function SkeletonText({ width = '70%' }: { width?: number | string }) {
  return <SkeletonBlock width={width} height={10} />;
}
