import { CSSObject } from 'styled-components';
import styled from 'styled-components/native';
import { ButtonHeight, ButtonSize, IStylesTheme } from '../ButtonProps';

interface IStylesProps {
  theme: IStylesTheme;
  font: string;
  size: ButtonSize;
  styles?: CSSObject;
}

export const GeneralStyledBtn = styled.TouchableOpacity`
  ${({ styles }) => styles}
  alignItems: center;
  backgroundColor: ${({ theme }: IStylesProps) => theme.backgroundColor};
  borderRadius: 4px;
  border-width: ${({ theme }: IStylesProps) => theme.borderWidth};
  border-color: ${({ theme }: IStylesProps) => theme.borderColor };
  display: flex;
  height: ${({ size }: IStylesProps) => ButtonHeight[size]};
  justifyContent: center;
  width: ${({ theme }: IStylesProps) => theme.width};
  padding: 8px 24px;
  textAlign: center;
  margin: 0;
`;

export const ContentText = styled.Text`
  color: ${({ theme }: IStylesProps) => theme.color};
  fontFamily: ${({ font }: IStylesProps) => font};
  fontSize: ${({ size }: IStylesProps) => size === 'small' ? '12px' : '16px'};
  fontWeight: 700;
  letterSpacing: 0.1px;
  lineHeight: 16px;
`;