import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Meta, StoryObj} from '@storybook/react';
import {SPACING} from '@shared/theme';

import {Skeleton} from './index';

const styles = StyleSheet.create({
  container: {gap: SPACING['x1.5']},
  row: {flexDirection: 'row', gap: SPACING['x1.5']},
});

const meta: Meta<typeof Skeleton> = {
  title: 'HuGo/Skeleton',
  component: Skeleton,
  decorators: [
    () => (
      <Skeleton style={styles.container}>
        <View style={styles.row}>
          <Skeleton.Item width="12%" />
          <Skeleton.Item width="84%" />
        </View>
        <Skeleton.Item height={300} />
        <Skeleton.Item />
      </Skeleton>
    ),
  ],
};

type Story = StoryObj<typeof Skeleton>;

export const Primary: Story = {};

export default meta;