import React from 'react';

import { SortByProps } from './sort-by.types';

import Dropdown from 'components/fields/dropdown';

import * as Styles from './sort-by.styles';
import { DropdownStyle } from '../fields/dropdown/dropdown.types';

const SortBy = (props: SortByProps): JSX.Element => {
  const { onChange, options, title, maxWidth } = props;

  return (
    <Styles.SortByContainer maxWidth={maxWidth}>
      {title &&
      <Styles.Title mx={10} fontSize={[3]}>
        {title}
      </Styles.Title>}
      <Dropdown maxWidth={maxWidth} style={DropdownStyle.MINIMAL} onChange={onChange} options={options} />
    </Styles.SortByContainer>
  )
}

export default SortBy;