import * as React from 'react';
import StyleguideDeviceFrame from './styleguide-device-frame';

export const SpecStyleguideDeviceFrame = () => (
    <StyleguideDeviceFrame isIframe={true} isResponsive={true} fit={true} size={'SMALL'}>
        <div style={{ fontSize: 'clamp(10vmin, 15vmin, 18vmin)' }}>
            Sunt labore sit ipsum officia cillum cupidatat ex duis. Proident exercitation labore
            adipisicing officia aliqua. Velit ad nulla veniam duis magna cupidatat laboris duis
            minim. Sunt ut do magna nisi exercitation. Aute cupidatat dolore excepteur nostrud.
            Cupidatat quis commodo ullamco esse dolor proident laboris quis. Nostrud Lorem magna id
            qui nulla veniam duis sint incididunt laboris nostrud exercitation voluptate.
        </div>
    </StyleguideDeviceFrame>
);

export const SpecStyleguideDeviceMedium = () => (
    <StyleguideDeviceFrame isIframe={true} isResponsive={true} size={'MEDIUM'}>
        <div style={{ fontSize: 'clamp(10vmin, 15vmin, 18vmin)' }}>
            Sunt labore sit ipsum officia cillum cupidatat ex duis. Proident exercitation labore
            adipisicing officia aliqua. Velit ad nulla veniam duis magna cupidatat laboris duis
            minim. Sunt ut do magna nisi exercitation. Aute cupidatat dolore excepteur nostrud.
            Cupidatat quis commodo ullamco esse dolor proident laboris quis. Nostrud Lorem magna id
            qui nulla veniam duis sint incididunt laboris nostrud exercitation voluptate.
        </div>
    </StyleguideDeviceFrame>
);

export const SpecStyleguideDeviceFrameLarge = () => (
    <StyleguideDeviceFrame isIframe={true} isResponsive={true} size={'LARGE'}>
        <div style={{ fontSize: 'clamp(10vmin, 15vmin, 18vmin)' }}>
            Sunt labore sit ipsum officia cillum cupidatat ex duis. Proident exercitation labore
            adipisicing officia aliqua. Velit ad nulla veniam duis magna cupidatat laboris duis
            minim. Sunt ut do magna nisi exercitation. Aute cupidatat dolore excepteur nostrud.
            Cupidatat quis commodo ullamco esse dolor proident laboris quis. Nostrud Lorem magna id
            qui nulla veniam duis sint incididunt laboris nostrud exercitation voluptate.
        </div>
    </StyleguideDeviceFrame>
);