import React from 'react'
import { Paper } from '../components'
import type { Meta, StoryObj } from '@storybook/react'

import Grid from '@mui/material/Grid'
import Box from '@mui/material/Box'
import { ThemeProvider, styled } from '@mui/material/styles'
import { themes } from '../helpers'

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  textAlign: 'center',
  height: 60,
  lineHeight: '60px',
}))

const meta = {
  title: 'Layout/Paper',
  component: Paper,
  parameters: {
    // layout: "centered",
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof Paper>

export default meta

type Story = StoryObj<typeof meta>

const defaultArgs = {}

export const PaperElevations = () => (
  <Grid container spacing={2}>
    <Grid item xs={12}>
      <Box
        sx={{
          p: 2,
          bgcolor: 'background.default',
          display: 'grid',
          gridTemplateColumns: { md: '1fr 1fr' },
          gap: 2,
        }}
      >
        {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => (
          <Item key={elevation} elevation={elevation}>
            {`elevation=${elevation}`}
          </Item>
        ))}
      </Box>
    </Grid>
  </Grid>
)