import heroVariables from '../global';

const TITLE_FONT_SIZE = heroVariables.HEADER_4;
const TITLE_LINE_HEIGHT = TITLE_FONT_SIZE * 1.4;
const TITLE_COLOR = heroVariables.TEXT_COLOR;
const SUBTITLE_FONT_SIZE = heroVariables.HEADER_5;
const SUBTITLE_LINE_HEIGHT = SUBTITLE_FONT_SIZE * 1.4;
const SUBTITLE_COLOR = heroVariables.MUTED_TEXT_COLOR;
const WRAPPER_PADDING_VERTICAL = heroVariables.MEDIUM_SIZE;
const WRAPPER_PADDING_HORIZONTAL = heroVariables.MEDIUM_SIZE;
const WRAPPER_HEIGHT = TITLE_LINE_HEIGHT + SUBTITLE_LINE_HEIGHT + WRAPPER_PADDING_VERTICAL * 2.0;
const WRAPPER_BORDER_COLOR = heroVariables.BORDER_COLOR;

const fontStyles = heroVariables.FONT_FAMILY !== undefined ? { fontFamily: heroVariables.FONT_FAMILY } : {};

const listItemStyles = {
  wrapper: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    minHeight: WRAPPER_HEIGHT,
    paddingVertical: WRAPPER_PADDING_VERTICAL,
    paddingHorizontal: WRAPPER_PADDING_HORIZONTAL,
    borderBottomWidth: 0.8,
    borderBottomColor: WRAPPER_BORDER_COLOR,
  },
  title: {
    fontSize: TITLE_FONT_SIZE,
    fontWeight: '500',
    lineHeight: TITLE_LINE_HEIGHT,
    color: TITLE_COLOR,
    ...fontStyles,
  },
  subtitle: {
    fontSize: SUBTITLE_FONT_SIZE,
    fontWeight: '500',
    lineHeight: SUBTITLE_LINE_HEIGHT,
    color: SUBTITLE_COLOR,
    ...fontStyles,
  },
  contentWrapper: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  textWrapper: {
    flex: 1,
    flexDirection: 'row',
  },
} as const;

export default listItemStyles;