import React from 'react';
import { storiesOf } from '@storybook/react-native';

import { Pressable } from './Pressable';
import { Typography } from '../Typography/Typography';

storiesOf('Components/Atoms/Pressable', module)
  .add('Default', () => <Pressable shadow={5} bg="orange.500" size={100} />)
  .add('State callback', () => (
    <>
      <Pressable
        style={({ pressed }) =>
          pressed ? { backgroundColor: 'yellow' } : undefined
        }
        shadow={5}
        bg="lightgreen.500"
        size={100}
        mb="lg"
      />
      <Pressable
        shadow={5}
        bg="lightblue.500"
        size={100}
        alignItems="center"
        justifyContent="center"
      >
        {({ pressed }) => (
          <Typography fontWeight="bold" selectable={false} color="white">
            {pressed ? 'Pressed' : 'Not pressed'}
          </Typography>
        )}
      </Pressable>
    </>
  ));