import styled from 'styled-components/native';
import { TThemed } from '../../common/types';
import { SBox } from '../../common/s-components/layout/s-box';
import { checkIsLight } from '../transducers';
import { TLightMarketVariant } from '../types';
import { fp as _ } from '../../common/utils/fp';

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

export const SRowTitleWrapper = styled<any>(SBox)`
  align-items: center;
  border-bottom-color: ${({ theme, variant }: TProps) =>
    checkIsLight(variant as TLightMarketVariant)
      ? theme.colors.athensGray3
      : theme.colors.waikawaGray};
  border-bottom-width: ${1}px;
  flex-direction: row;
  margin-left: ${16}px;
  margin-right: ${16}px;
  padding-bottom: ${({ pb }) => (_.isNotNil(pb) ? `${pb}px` : '23px')};
`;