import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Meta, StoryObj} from '@storybook/react';
import {Typography} from '@components/_core/Typography';

import {Tooltip} from './index';

const styles = StyleSheet.create({
  container: {flexDirection: 'row', alignItems: 'center'},
});

const meta: Meta<typeof Tooltip> = {
  title: 'HuGo/Tooltip',
  component: Tooltip,
  argTypes: {
    iconSize: {control: 'radio', options: ['lg', 'sm']},
    info: {control: 'text'},
  },
};

type Story = StoryObj<typeof Tooltip>;

export const TooltipComponent: Story = {
  args: {
    iconSize: 'sm',
    info: 'I am a tooltip with a description. You can change this by the "info" argument.',
  },
  render: args => (
    <View style={styles.container}>
      <Typography variant="s">This is a title</Typography>
      <Tooltip {...args} />
    </View>
  ),
};

export default meta;
