import React from 'react';
import styled from 'styled-components/native';
import { RSValue } from '../../RFValue';

export const Container = styled.View<any>`
   background: #222;
   width: ${(props) => RSValue(props.theme.iconM || 24 * 2)}px;
   height: ${(props) => RSValue(props.theme.iconM || 24 * 2)}px;
   border-radius: 300px;
   overflow: hidden;

   ${(props) => props.size === 'xs' && `width: ${RSValue(props.theme.iconXS || 12 * 2)}px`};
   ${(props) => props.size === 'xs' && `height: ${RSValue(props.theme.iconXS || 12 * 2)}px`};
   ${(props) => props.size === 'xs' && `line-height: ${RSValue(props.theme.iconXS || 12 * 2)}px`};

   ${(props) => props.size === 's' && `width: ${RSValue(props.theme.iconS || 18 * 2)}px`};
   ${(props) => props.size === 's' && `height: ${RSValue(props.theme.iconS || 18 * 2)}px`};
   ${(props) => props.size === 's' && `line-height: ${RSValue(props.theme.iconS || 18 * 2)}px`};

   ${(props) => props.size === 'm' && `width: ${RSValue(props.theme.iconM || 24 * 2)}px`};
   ${(props) => props.size === 'm' && `height: ${RSValue(props.theme.iconM || 24 * 2)}px`};
   ${(props) => props.size === 'm' && `line-height: ${RSValue(props.theme.iconM || 24 * 2)}px`};

   ${(props) => props.size === 'l' && `width: ${RSValue(props.theme.iconL || 48 * 2)}px`};
   ${(props) => props.size === 'l' && `height: ${RSValue(props.theme.iconL || 48 * 2)}px`};
   ${(props) => props.size === 'l' && `line-height: ${RSValue(props.theme.iconL || 48 * 2)}px`};

   ${(props) => props.size === 'xl' && `width: ${RSValue(props.theme.iconXL || 60 * 2)}px`};
   ${(props) => props.size === 'xl' && `height: ${RSValue(props.theme.iconXL || 60 * 2)}px`};
   ${(props) => props.size === 'xl' && `line-height: ${RSValue(props.theme.iconXL || 60 * 2)}px`};

   ${(props) => props.sizeCircle && `width: ${RSValue(props.sizeCircle)}px`};
   ${(props) => props.sizeCircle && `height: ${RSValue(props.sizeCircle)}px`};
   ${(props) => props.sizeCircle && `line-height: ${RSValue(props.sizeCircle)}px`};
`;

export const ImageUser = styled.Image`
   width: 100%;
   height: 100%;
`;
