mobile/src/components/SectionHeader.tsx

import React from 'react';
import { Platform, ViewStyle, TextStyle } from 'react-native';
import styled from 'styled-components/native';

type Props = {
  title: string;
  subtitle?: string;
  buttonText?: string;
  buttonAction?: () => void;
  buttonStyles?: TextStyle;
  tinted?: boolean;
  backgroundColor?: ViewStyle['backgroundColor'];
};

const Container = styled.View<Pick<Props, 'backgroundColor'>>`
  /* flex: 1; */
  /* flex-grow: 0; */
  justify-content: space-between;
  flex-direction: row;
  padding-right: ${props => props.theme.paddingLeft}px;
  padding-bottom: 10px;
  padding-top: 10px;
  background-color: ${props =>
    props.backgroundColor ?? props.theme.stylekitBackgroundColor};
`;
const TitleContainer = styled.View``;
const Title = styled.Text<Pick<Props, 'tinted'>>`
  background-color: ${props => props.theme.stylekitBackgroundColor};
  font-size: ${props =>
    Platform.OS === 'android'
      ? props.theme.mainTextFontSize - 2
      : props.theme.mainTextFontSize - 4}px;
  padding-left: ${props => props.theme.paddingLeft}px;
  color: ${props => {
    if (props.tinted) {
      return props.theme.stylekitInfoColor;
    }

    return Platform.OS === 'android'
      ? props.theme.stylekitInfoColor
      : props.theme.stylekitNeutralColor;
  }};
  font-weight: ${Platform.OS === 'android' ? 'bold' : 'normal'};
`;
const SubTitle = styled.Text`
  background-color: ${props => props.theme.stylekitBackgroundColor};
  font-size: ${props => props.theme.mainTextFontSize - 5}px;
  margin-top: 4px;
  padding-left: ${props => props.theme.paddingLeft}px;
  color: ${props => props.theme.stylekitNeutralColor};
`;
const ButtonContainer = styled.TouchableOpacity`
  flex: 1;
  align-items: flex-end;
  justify-content: center;
`;
const Button = styled.Text`
  color: ${props => props.theme.stylekitInfoColor};
`;

export const SectionHeader: React.FC<Props> = props => (
  <Container>
    <TitleContainer>
      <Title>
        {Platform.select({
          ios: props.title.toUpperCase(),
          android: props.title,
        })}
      </Title>
      {props.subtitle && <SubTitle>{props.subtitle}</SubTitle>}
    </TitleContainer>
    {props.buttonText && (
      <ButtonContainer onPress={props.buttonAction}>
        <Button style={props.buttonStyles}>{props.buttonText}</Button>
      </ButtonContainer>
    )}
  </Container>
);