import { RFValue } from 'react-native-responsive-fontsize';
import styled from 'styled-components/native';
import { ITheme } from '../../AppProvider/ITheme';
import { Pressable } from '../../Pressable';
import { RSValue } from '../../RFValue';
import { TextNative } from '../../TextNative';

export const Container = styled.View`
   flex-direction: row;
`;

export const TabContainer = styled(Pressable)<any>`
   height: ${RSValue(50)}px;
   align-items: center;
   align-content: center;
   justify-content: center;
`;

export const Tab = styled(TextNative).attrs<ITheme>({
   bold: true,
})`
   height: ${RSValue(35)}px;
   line-height: ${RSValue(35)}px;
   padding: 0px ${RSValue(15)}px;
   align-self: center;
   font-size: ${RFValue(13)}px;
   text-transform: uppercase;
   border-radius: 200px;
   color: ${(props) => props.theme?.tabs?.textColor ?? '#999'};
   border: 1px solid transparent;
   z-index: 10;
   ${(props) => props.skeleton && `background: ${props.theme?.tabs?.textColor ?? '#999'};`};
   ${(props) => props.skeleton && `opacity: 0.5;`};
   ${(props) => props.skeleton && `color: transparent;`};
`;

export const TabActive = styled(Tab)`
   color: ${(props) => props.theme?.tabs?.textActiveColor ?? 'white'};
   ${(props) => props.skeleton && `color: ${props.theme?.tabs?.backgroundActiveColor ?? 'black'};`};
   background: transparent;
`;
