import styled from '@emotion/native';
import { View, Animated, StyleSheet } from 'react-native';

const AnimatedView = Animated.createAnimatedComponent(View);

export const StyledWrapper = styled(View)(({ theme }) => ({
  flexDirection: 'row',
  width: '100%',
  height: theme.__hd__.switch.sizes.selector.height,
  borderRadius: theme.__hd__.switch.radii.selector.default,
  backgroundColor: theme.__hd__.switch.colors.selector.background,
  paddingHorizontal:
    theme.__hd__.switch.spaces.selector.wrapperHorizontalPadding,
  position: 'relative',
}));

export const StyledTextWrapper = styled(AnimatedView)(({ theme }) => ({
  flex: 1,
  borderRadius: theme.__hd__.switch.radii.selector.default,
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 1,
}));

export const StyledIconWrapper = styled(AnimatedView)(({ theme }) => ({
  paddingHorizontal: theme.__hd__.switch.spaces.selector.iconPadding,
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 1,
}));

export const StyledKnot = styled(AnimatedView)(({ theme }) => ({
  ...StyleSheet.absoluteFillObject,
  borderRadius: theme.__hd__.switch.radii.selector.default,
  backgroundColor: theme.__hd__.switch.colors.selector.textBackground,
}));