import { dropShadows, innerShadows } from '../tokens.ts';
import Token from '../Token.tsx';
import styles from './Effects.module.css';

export default {
  title: 'Tokens',
};

export const Effects = () => {
  return (
    <div>
      <div className={styles.effects}>
        <h2>Drop Shadows</h2>
        <div className={styles.values}>
          {Object.entries(dropShadows).map((value, index) => (
            <Token
              title={value[0]}
              value={value[1]}
              key={index}
              preview={
                <div className={styles.effectsPreviewWrapper}>
                  <div style={{ boxShadow: value[1] }} className={styles.effectsPreviewInner}></div>
                </div>
              }
            />
          ))}
        </div>
      </div>
      <div className={styles.effects}>
        <h2>Inner Shadows</h2>
        <div className={styles.values}>
          {Object.entries(innerShadows).map((value, index) => (
            <Token
              title={value[0]}
              value={value[1]}
              key={index}
              preview={
                <div className={styles.effectsPreviewWrapper}>
                  <div style={{ boxShadow: value[1] }} className={styles.effectsPreviewInner}></div>
                </div>
              }
            />
          ))}
        </div>
      </div>
    </div>
  );
};