import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { KnobGroup } from './knob-group';
import { LegendGroup } from './legend-group';
import { TSurveyLabel, TValue } from '../types';

type TProps = {
  message: string;
  labels: TSurveyLabel;
  value?: TValue;
  onChange: (value: TValue) => void;
};

export const SlideRating: React.FC<TProps> = props => {
  const { message, onChange, value, labels } = props;

  return (
    <SBox pt={67}>
      <SBox mb={26} px={16}>
        <SH3 textAlign="center" lineHeight="24px">
          {message}
        </SH3>
      </SBox>
      <SBox mb={41}>
        <KnobGroup onChange={onChange} value={value} />
      </SBox>
      <LegendGroup labels={labels} />
    </SBox>
  );
};