import { Box } from '@mui/material';
import Spinner from '.';

export default {
  title: 'Deprecated/Spinner',
};

export function Default() {
  return (
    <Box
      sx={{
        width: 300,
        height: 300,
        border: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Spinner />
    </Box>
  );
}

Default.storyName = 'default';

export function CustomColor() {
  return (
    <Box
      sx={{
        p: 2,
      }}>
      <h5>color="primary"</h5>
      <Box
        sx={{
          p: 4,
        }}>
        <Spinner color="primary" />
      </Box>
      <h5>color="secondary"</h5>
      <Box
        sx={{
          p: 4,
        }}>
        <Spinner color="secondary" />
      </Box>
      <h5>color="inherit"</h5>
      <Box
        sx={{
          p: 4,
          color: 'blue',
        }}>
        <Spinner color="inherit" />
      </Box>
      <h5>style=&#123;&#123; color: '#128323' &#125;&#125;</h5>
      <Box
        sx={{
          p: 4,
        }}>
        <Spinner style={{ color: '#128323' }} />
      </Box>
    </Box>
  );
}

CustomColor.storyName = 'custom color';

export function CustomSize() {
  return (
    <Box
      sx={{
        p: 2,
      }}>
      <h5>default: size=40</h5>
      <Box
        sx={{
          p: 4,
        }}>
        <Spinner />
      </Box>
      <h5>size=12</h5>
      <Box
        sx={{
          p: 4,
        }}>
        <Spinner size={12} />
      </Box>
      <h5>size: [12, 8] (Compatible with the old API)</h5>
      <Box
        sx={{
          p: 4,
        }}>
        <Spinner size={[12, 8]} />
      </Box>
    </Box>
  );
}

CustomSize.storyName = 'custom size';
