import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import { RtSpinner } from '@dpa/react-loaders';
import { RtButton } from '@dpa/react-buttons';

export function SpinnerPage() {
  return (
    <RtFrame
      as="div"
      surface="foundation-low-tint"
      use="achromatic-ashy"
      sizeScheme="smooth"
      style={{
        minHeight: '100vh',
        padding: '40px',
      }}
    >
      <RtFrame
        as="div"
        surface="foundation-pure"
        use="achromatic-cloudy"
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
          borderRadius: '10px',
          padding: '24px',
        }}
      >
        <RtText typography="title-md-medium">RT Spinner</RtText>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            flexWrap: 'wrap',
            gap: '24px',
          }}
        >
          <RtSpinner size="sm" width="lg" height="lg" />
          <RtSpinner size="md" width="lg" height="lg" />
          <RtSpinner size="lg" width="lg" height="lg" />
        </div>

        <div style={{ display: 'flex', gap: '8px' }}>
          <RtButton use="primary" leadingSlot={<RtSpinner size="sm" />} />
        </div>
      </RtFrame>
    </RtFrame>
  );
}