import { Meta, Story, Canvas, Title, Subtitle, Source } from '@storybook/addon-docs';
import styled from 'styled-components';
import dedent from 'ts-dedent';
import getDepth from '@lendi-ui/commons/depth';
import { Spacer } from '@lendi/ui/Layout';

<Meta title="Foundations/Layout &amp; Elevation/Depth" />

<Title>Depth</Title>
<Subtitle>CSS helper to show elevation</Subtitle>

<Source language='tsx' dark={true} code={dedent`
  import getDepth from '@lendi-ui/commons/depth';
  const Panel = styled.div\`
    box-shadow: \${getDepth(1)};
  \`;`} />

export const Panel = styled.div`
  box-shadow: ${props => getDepth(props.depth)};
  padding: 20px;
`;

<Canvas>
  <Story name="Matrix">
    {(args) => {
      return (
        <Spacer gap="lg">
          <Panel depth={1}>A box!</Panel>
          <Panel depth={2}>A box!</Panel>
          <Panel depth={3}>A box!</Panel>
          <Panel depth={4}>A box!</Panel>
        </Spacer>
      )
    }}
  </Story>
</Canvas>

## LUI Now Migration
- We no longer include the `box-shadow: ` in the string
- All visuals are the same