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

import {Typography, TypographyProps} from './index';

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

const meta: Meta<typeof Typography> = {
  title: 'HuGo/Typography',
  component: Typography,
  argTypes: {
    align: {
      control: 'radio',
      options: ['auto', 'left', 'right', 'center', 'justify'],
    },
    weight: {
      control: 'radio',
      options: ['regular', 'semiBold'],
    },
    fontStyle: {control: 'radio', options: ['normal', 'italic']},
  },
};

export const TextComponent: StoryObj<TypographyProps> = {
  args: {
    children: 'Text',
  },
  render: ({children, ...args}) => (
    <View style={styles.container}>
      <Typography variant="xxl" {...args}>
        {children}(xxl)
      </Typography>
      <Typography variant="xl" {...args}>
        {children}(xl)
      </Typography>
      <Typography variant="l" {...args}>
        {children}(l)
      </Typography>
      <Typography variant="m" {...args}>
        {children}(m)
      </Typography>
      <Typography variant="s" {...args}>
        {children}(s)
      </Typography>
      <Typography variant="xs" {...args}>
        {children}(xs)
      </Typography>
      <Typography variant="xxs" {...args}>
        {children}(xxs)
      </Typography>
      <Typography variant="xxs" {...args}>
        {children}(xxs)
      </Typography>
      <Typography variant="xxxs" {...args}>
        {children}(xxxs)
      </Typography>
    </View>
  ),
};

export default meta;
