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 GeneralStyledButton = styled.TouchableOpacity`
  margin: 0;
  ${({ styles }) => styles}
  align-items: center;
  background-color: ${({ theme }: IStylesProps) => theme.backgroundColor};
  border-radius: 4px;
  border-width: ${({ theme }: IStylesProps) => theme.borderWidth};
  border-color: ${({ theme }: IStylesProps) => theme.borderColor};
  display: flex;
  height: ${({ size }: IStylesProps) => ButtonHeight[size]};
  justify-content: center;
  width: ${({ theme }: IStylesProps) => theme.width};
  padding: 8px 24px;
  text-align: center;
`;

export const ContentText = styled.Text`
  color: ${({ theme }: IStylesProps) => theme.color};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: ${({ size }: IStylesProps) => size === 'small' ? '12px' : '16px'};
  font-weight: 700;
  height: 16px;
  letter-spacing: 0.1px;
  line-height: 16px;
`;