// @flow
import React from 'react';
import styled from 'styled-components';
import type { TimeRangeSelectorProps } from './time-range-selector.proptypes';
import { TimeRangeItem } from './components/time-range-item.component';
import { Box } from '../../primitives';

const Container = styled(Box)`
  position: relative;
`;

const defaultSpacing = ['pv2', 'ph3'];

export const TimeRangeSelector = ({
  options,
  value,
  spacing,
  fontSize = 'f1',
  onChange,
  className,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
  ...rest
}: TimeRangeSelectorProps) => (
  <Container
    stacked="row"
    align="center"
    justify="space-between"
    spacing={spacing ?? defaultSpacing}
    className={className}
    data-cy={dataCy}
    data-qa={dataQa}
    id={id}
    {...rest}
  >
    {options.map((option) => {
      return (
        <TimeRangeItem
          key={option.value}
          value={option.value}
          selected={option.value === value}
          onClick={onChange}
          label={option.label}
          fontSize={fontSize}
        />
      );
    })}
  </Container>
);

TimeRangeSelector.displayName = 'TimeRangeSelector';
