// @flow
import React from 'react';
import type { SegmentedControlProps } from './segmented-control.proptypes';
import { SegmentedControlContext } from './segmented-control.proptypes';
import { Box } from '../../../primitives/box';

export const SegmentedControl = ({
  value,
  onChange,
  children,
}: SegmentedControlProps) => {
  const segmentedControlContextValues = {
    selectedValue: value,
    onItemClick: onChange,
  };

  return (
    <SegmentedControlContext.Provider value={segmentedControlContextValues}>
      <Box stacked="row">{children}</Box>
    </SegmentedControlContext.Provider>
  );
};

SegmentedControl.displayName = 'SegmentedControl';
