import React from 'react';
import { SCol } from '../../common/s-components/layout/s-col';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { SBox } from '../../common/s-components/layout/s-box';
import { SRow } from '../../common/s-components/layout/s-row';
import { theme } from '../../app/theme';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { TCustomRangeEntity } from '../../common/types';
import { fp as _ } from '../../common/utils/fp';

type TProps = {
  title: string;
  range: TCustomRangeEntity;
  pb: number;
  px: number;
};

export const Header: React.FC<TProps> = props => {
  const { title, range, ...rest } = props;
  return (
    <SBox {...rest}>
      <SRow alignItems="center" justifyContent="space-between">
        <SCol>
          <SH3>{title}</SH3>
        </SCol>
        <SCol marginTop={2}>
          <SH6 color={theme.colors.periwinkleGray}>
            {_.path('standard', range)}
          </SH6>
        </SCol>
      </SRow>
    </SBox>
  );
};