import styled from 'styled-components/native';
import { theme } from 'data/dataMx';
import { Platform } from 'react-native';

interface IStyleProps {
  type?: 'horizontal' | 'vertical';
}

export const CardClickable = styled.TouchableOpacity`
  width: ${({type}: IStyleProps) => type === 'horizontal' ? '340px' : '160px'};
  background-color: white;
  box-shadow: 0px 4px 12px ${ Platform.OS == 'android' ? theme.neutral600 : 'rgba(189, 189, 189, 0.25)'};
  elevation: 4;
  border-radius: 8px;

  ${({type}: IStyleProps) => type === 'horizontal' && {display: 'flex'}}
  ${({type}: IStyleProps) => type === 'horizontal' && {'flex-direction': 'row'}}
  ${({type}: IStyleProps) => type === 'horizontal' && {'align-items': 'center'}}
`;

export const CardClickableInfo = styled.View`
  ${({type}: IStyleProps) => type === 'horizontal' && {width: '55%'}}
  ${({type}: IStyleProps) => type === 'vertical' && {alignItems: 'center'}}
`;

export const CardClickableTitle = styled.View`
  padding-bottom: 12px;
  ${({type}: IStyleProps) => type === 'vertical' && {'text-align': 'center'}}
`;

export const CardClickableImage = styled.View`
  margin: 0;
  ${({type}: IStyleProps) => type === 'horizontal' && {width: '40%'}}
  ${({type}: IStyleProps) => type === 'horizontal' && {'margin-right': '16px'}}
  ${({type}: IStyleProps) => type === 'horizontal' && {'text-align': 'center'}}
`;

export const CardClickableDescription = styled.View`
  padding: 16px 0 8px;
`;

export const CardClickableCategory = styled.View`
  padding: 8px 0;
`;

export const CardClickablePoints = styled.View`
  padding-bottom: 12px;
`;
