import { RtButton } from '@dpa/react-buttons';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import { AiTypographyIcon } from '@dpa/react-typography-icons';

export function TypographyIconsPage() {
  return (
    <RtFrame
      as="div"
      surface="foundation-low-tint"
      use="achromatic-ashy"
      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">Типографические Иконки</RtText>

        <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          <AiTypographyIcon typography="symbol-sm-primary" />

          <RtButton
            leadingIcon={AiTypographyIcon}
            label="Label"
            labelsJustify="start"
            use="primary"
            size="sm"
          />

          <RtButton
            leadingIcon={AiTypographyIcon}
            label="Label"
            labelsJustify="start"
            use="primary"
            size="md"
          />
          <RtButton
            leadingIcon={AiTypographyIcon}
            label="Label"
            labelsJustify="start"
            use="primary"
            size="lg"
          />
        </div>
      </RtFrame>
    </RtFrame>
  );
}