import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Stack, Typography } from '@mui/material';
import PhoneMockup from '.';
const meta = {
    component: PhoneMockup,
    title: 'Design System/PhoneMockup',
    tags: ['autodocs'],
    argTypes: {
        width: {
            control: { type: 'number' },
        },
    },
    args: {
        width: 320,
    },
    decorators: [
        Story => (_jsx(Box, { sx: { height: '70vh', display: 'flex', justifyContent: 'center' }, children: _jsx(Story, {}) })),
    ],
};
export default meta;
const FillerContent = () => (_jsxs(Stack, { sx: { p: 2, gap: 2 }, children: [_jsx(Box, { sx: {
                height: 160,
                borderRadius: 2,
                background: 'linear-gradient(135deg, #496be3 0%, #29317f 100%)',
            } }), _jsx(Typography, { variant: "globalM", fontWeight: "fontWeightSemiBold", children: "Reuni\u00F3n de bienvenida" }), _jsx(Typography, { variant: "globalS", children: "Tendr\u00E1s una reuni\u00F3n con tu l\u00EDder para conversar sobre los objetivos de tu rol en estos primeros tres meses." }), Array.from({ length: 12 }).map((_, i) => (_jsxs(Typography, { variant: "globalS", children: ["\u00CDtem ", i + 1, ": contenido de ejemplo para verificar el scroll interno del mockup."] }, i)))] }));
export const Default = {
    render: args => (_jsx(PhoneMockup, { ...args, children: _jsx(FillerContent, {}) })),
};
export const Narrow = {
    args: {
        width: 280,
    },
    render: args => (_jsx(PhoneMockup, { ...args, children: _jsx(FillerContent, {}) })),
};
export const ShortContent = {
    render: args => (_jsx(PhoneMockup, { ...args, children: _jsxs(Stack, { sx: { p: 2, gap: 2 }, children: [_jsx(Typography, { variant: "globalM", fontWeight: "fontWeightSemiBold", children: "Contenido corto" }), _jsx(Typography, { variant: "globalS", children: "Sin scroll porque el contenido entra completo." })] }) })),
};
