import { View } from 'react-native';
import { styled } from '@dank-style/react';

export default styled(
  View,
  {
    'p': 8,
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',

    'variants': {
      size: {
        lg: {
          _icon: {
            height: '$5',
            width: '$5',
          },

          _text: {
            fontSize: '$xl',
          },

          _indicator: {
            h: '$6',
            w: '$6',
          },
        },

        md: {
          _icon: {
            height: '$4',
            width: '$4',
          },

          _text: {
            fontSize: '$lg',
          },

          _indicator: {
            h: '$5',
            w: '$5',
          },
        },

        sm: {
          _icon: {
            height: '$3',
            width: '$3',
          },

          _text: {
            fontSize: '$md',
          },

          _indicator: {
            h: '$4',
            w: '$4',
          },
        },
      },
    },

    'defaultProps': {
      size: 'md',
    },

    //@ts-ignore
    ':disabled': {
      opacity: 0.6,
    },

    //@ts-ignore
    '_web': {
      cursor: 'pointer',
    },
  },
  {
    descendantStyle: ['_icon', '_text', '_indicator'],
    DEBUG: 'CHECKBOX',
  }
);