import React from 'react';
import { Legend } from './legend';
import { SRow } from '../../common/s-components/layout/s-row';
import { SCol } from '../../common/s-components/layout/s-col';
import { TSurveyLabel } from '../types';
import { fp as _ } from '../../common/utils/fp';

type TProps = {
  labels: TSurveyLabel;
};

export const LegendGroup: React.FC<TProps> = props => {
  const { labels } = props;
  return (
    <SRow justifyContent="center">
      <SCol mr={20}>
        <Legend label={0} title={_.path('min', labels)} />
      </SCol>
      <Legend label={10} title={_.path('max', labels)} />
    </SRow>
  );
};