// @flow
import React from 'react'
import { styled, Element } from '@siteone/system-core'

const Base = styled(Element)`
  margin-right: 8px;
  font-size: 14px;
  border-right: 1px solid #eee;
  padding-right: 8px;
  color: #2b5672;
`

const Select = styled.select`
  border: 0;
  height: 32px;
  background: none;
  margin-left: 8px;
`

type SortType = {
    orderBy: string,
    onSortChange: Function
}

const Sort = ({ orderBy, onSortChange }: SortType) => (
  <Base>
    Řazení:
    <Select value={orderBy} onChange={onSortChange} >
      <option value='AZ_ASC'>A-Z</option>
      <option value='AZ_DESC'>Z-A</option>
      <option value='DATETIME_DESC'>Nejnovější</option>
      <option value='DATETIME_ASC'>Nejstarší</option>
    </Select>
  </Base>
)

export default Sort