import styled from 'styled-components/native';
import { SBox } from '../../common/s-components/layout/s-box';
import { TThemed } from '../../common/types';
import { checkIsLight } from '../transducers';
import { TLightMarketVariant } from '../types';
import { MARKET_VARIANT_PARAMS } from '../constants';

type TProps = TThemed<{
  variant: string;
  pb: number;
}>;

export const SMarketRow = styled<any>(SBox)`
  align-items: center;
  background-color: transparent;
  border-bottom-color: ${({ theme, variant }: TProps) =>
    checkIsLight(variant as TLightMarketVariant)
      ? theme.colors.athensGray3
      : variant === MARKET_VARIANT_PARAMS.notificationSettings
      ? theme.colors.fiord
      : theme.colors.waikawaGray};
  border-bottom-width: ${1}px;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: ${({ variant }) =>
    variant === MARKET_VARIANT_PARAMS.notificationSettings ? '13px' : '15px'};
  padding-top: ${({ variant }) =>
    variant === MARKET_VARIANT_PARAMS.notificationSettings ? '16px' : '14px'};
`;