import React from 'react';
import { Meta } from '@storybook/react';

import { boxShadowsTailwindInline } from '../components/configs/shadows';
import Shadow from '../storybookers/Shadow';
import Typography from '../components/Typography/Typography';

export default {
  title: 'Utils / Shadows',
  component: Shadow,
} as Meta;

export const Shadows = () => {
  return Object.entries(boxShadowsTailwindInline)?.map(([key, value]) => (
    <div>
      <Typography title={`shadow-${key}`} as="h2" styledAs="h6-bold" />
      {/* @ts-ignore:next-line  */}
      <Shadow theme={`w-full h-20 my-6 border ${value}`} />
    </div>
  ));
};