// @flow
import React, { useCallback } from 'react';
import styled from 'styled-components';
import { getForeground, getBackground } from './components.css-rules';
import { type FontSize } from '../../../mixins/typography';
import type { TranslatedContent } from '../../../types';
import { UnstyledButton } from '../../../core/behaviors/unstyled-button/unstyled-button.component';
import { Span } from '../../../core/typography/span';

export type TimeRangeItemProps = {|
  value: string,
  label: TranslatedContent,
  selected: boolean,
  onClick: (input: string) => void,
  fontSize: FontSize,
|};

const TimeRangeItemButton = styled(UnstyledButton)`
  background: ${getBackground};
  border-radius: 20px;
  color: ${getForeground};
  padding: 10px;
  position: relative;
  transition: 0.15s cubic-bezier(0.34, 0, 0.53, 1.3);
  z-index: 1;
`;

export const TimeRangeItem = ({
  value,
  selected,
  onClick,
  label,
  fontSize,
}: TimeRangeItemProps) => {
  const handleOnClick = useCallback(() => {
    onClick(value);
  }, [value, onClick]);

  return (
    <TimeRangeItemButton onClick={handleOnClick} selected={selected}>
      <Span bold fontSize={fontSize}>
        {label}
      </Span>
    </TimeRangeItemButton>
  );
};
