import { Platform } from 'react-native';
import { CSSObject } from 'styled-components';
import styled from 'styled-components/native';
import { IStylesTheme } from '../ButtonProps';

interface IStylesProps {
  theme: IStylesTheme;
  minWidth: string;
  styles?: CSSObject;
}

export const GeneralStyledBtn = styled.TouchableOpacity`
  ${({ styles }) => styles}
  align-items: center;
  border: none;
  display: flex;
  height: 22px;
  justifyContent: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  letter-spacing: 0.5px;
  line-height: 16px;
  width: ${({ theme }: IStylesProps) => theme.width};
  min-width: ${({ minWidth }: IStylesProps) => minWidth}
  ${
    () => {
      if (Platform.OS == 'ios') {
        return { fontWeight: 700 }
      }
    }
  }
`;
