import {Platform} from 'react-native';
import styled from 'styled-components/native';
import {heightPercentageToDP as hp} from 'react-native-responsive-screen';
import THEME from '@styles/theme';
import FONTS from '@assets/fonts';

export const Container = styled.View`
  flex-direction: row;
  background-color: ${THEME?.INFO?.MAIN};
  padding-top: ${hp(1.5)}px;
  padding-bottom: ${hp(Platform.OS === 'android' ? 1 : 3)}px;
`;

export const Tab = styled.TouchableOpacity`
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  position: relative;
`;

export const Title = styled.Text<{isFocused: boolean; isScan: boolean}>`
  color: ${props =>
    props?.isFocused ? (props?.isScan ? '#FFFFFF' : '#2BEAFB') : '#4F58CF'};
  font-family: ${FONTS.MEDIUM};
  font-size: ${hp(1.3)}px;
  padding-top: ${hp(1)}px;
  line-height: ${hp(1.4)}px;
`;

export const IconWrapper = styled.View<{isScan: boolean}>`
  top: ${props => (props?.isScan ? `-${hp(4)}px` : '0px')};
  position: ${props => (props?.isScan ? 'absolute' : 'relative')};
`;

export const Highlighter = styled.View`
  background-color: #2beafb;
  width: 36%;
  position: absolute;
  top: -${hp(1.5)}px;
  height: ${hp(0.3)}px;
`;