import { ITheme } from 'interfaces';
import styled from 'styled-components/native';
import { OrientationCard } from '.';

interface IStylesProps {
  theme: ITheme;
  orientation: OrientationCard;
  height?: string;
  width?: string;
}

export const CardButton = styled.View`
  width: ${({ width }: IStylesProps) => width};
  height: ${({ height }: IStylesProps) => height};
  borderRadius: 8px;
  position: relative;
  display: flex;
  flex-direction: ${({ orientation }: IStylesProps) => orientation};
  shadowOpacity: 0.9;
  shadowColor: ${({ theme }: IStylesProps) => theme.neutral400};
  shadowRadius: 20px;
  background-color: ${({ theme }: IStylesProps) => theme.neutral100};
`;

export const TextImage = styled.View`
  max-width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: ${({ theme }: IStylesProps) => theme.quaternary};
  padding: 2px 16px;
  borderBottomStartRadius: 8px;
  borderTopEndRadius: 8px;
  zIndex: 1;
  elevation: 1;
  height: 20px;
  align-items: center;
`;

export const ContainerImage = styled.View`
  height: ${({ orientation }: IStylesProps) => orientation == 'column' ? '42%' : '100%'};
  width: ${({ orientation }: IStylesProps) => orientation == 'column' ? '100%' : '45%'};
`;

export const ContainerText = styled.View`
  padding: 16px;
  margin: ${({ orientation }: IStylesProps) => orientation == 'column' ? '0' : '12px 0 0'};
  height: ${({ orientation }: IStylesProps) => orientation == 'column' ? '58%' : '100%'};
  width: ${({ orientation }: IStylesProps) => orientation == 'column' ? '100%' : '55%'};
  display: flex;
  flex-direction: column;
  justify-content: space-around;

`;

export const ContainerButton = styled.View`
  margin: 8px 0;
`;
