import * as React from 'react';
import Toggle from '.';
import { Shelf, Stack } from '../Layout/index';
import { Text } from '../Text';

export default {
  title: 'Components|Toggle',
  component: Toggle,
};

const ToggleComponent = () => {
  const [isOn, setToggle] = React.useState(false);

  return (
    <Stack gap="large">
      <Shelf gap="xsmall" alignItems="center">
        <Text color="Mid Neutral 1">Yearly (save 16%)</Text>
        <Toggle />
        <Text color="Mid Neutral 1">Monthly</Text>
      </Shelf>
      <Shelf gap="xsmall" alignItems="center">
        <Text color="Mid Neutral 1">Male</Text>
        <Toggle toggleColor={isOn ? '#FFC0CB' : 'Blue'} handleToggle={setToggle} toggleOn={isOn} />
        <Text color="Mid Neutral 1">Female</Text>
      </Shelf>
      <Shelf gap="xsmall" alignItems="center">
        <span aria-label="smile" role="img">
          😊
        </span>
        <Toggle toggleColor="Orange" />
        <span aria-label="cry" role="img">
          😭
        </span>
      </Shelf>
    </Stack>
  );
};

export const index = () => <ToggleComponent />;