import { Box, Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import PhoneMockup from '.';

const meta: Meta<typeof PhoneMockup> = {
  component: PhoneMockup,
  title: 'Design System/PhoneMockup',
  tags: ['autodocs'],
  argTypes: {
    width: {
      control: { type: 'number' },
    },
  },
  args: {
    width: 320,
  },
  decorators: [
    Story => (
      <Box sx={{ height: '70vh', display: 'flex', justifyContent: 'center' }}>
        <Story />
      </Box>
    ),
  ],
};

export default meta;

type Story = StoryObj<typeof PhoneMockup>;

const FillerContent = () => (
  <Stack sx={{ p: 2, gap: 2 }}>
    <Box
      sx={{
        height: 160,
        borderRadius: 2,
        background: 'linear-gradient(135deg, #496be3 0%, #29317f 100%)',
      }}
    />
    <Typography
      variant="globalM"
      fontWeight="fontWeightSemiBold"
    >
      Reunión de bienvenida
    </Typography>
    <Typography variant="globalS">
      Tendrás una reunión con tu líder para conversar sobre los objetivos de tu
      rol en estos primeros tres meses.
    </Typography>
    {Array.from({ length: 12 }).map((_, i) => (
      <Typography
        key={i}
        variant="globalS"
      >
        Ítem {i + 1}: contenido de ejemplo para verificar el scroll interno del
        mockup.
      </Typography>
    ))}
  </Stack>
);

export const Default: Story = {
  render: args => (
    <PhoneMockup {...args}>
      <FillerContent />
    </PhoneMockup>
  ),
};

export const Narrow: Story = {
  args: {
    width: 280,
  },
  render: args => (
    <PhoneMockup {...args}>
      <FillerContent />
    </PhoneMockup>
  ),
};

export const ShortContent: Story = {
  render: args => (
    <PhoneMockup {...args}>
      <Stack sx={{ p: 2, gap: 2 }}>
        <Typography
          variant="globalM"
          fontWeight="fontWeightSemiBold"
        >
          Contenido corto
        </Typography>
        <Typography variant="globalS">
          Sin scroll porque el contenido entra completo.
        </Typography>
      </Stack>
    </PhoneMockup>
  ),
};