import React from 'react'
import Selector from 'react-awesome-selector'
import 'react-awesome-selector/dist/style.css'

const data = [
  { name: 'card', value: 89519 },
  { name: 'array', value: 49024 },
  { name: 'grocery', value: 90170 },
  { name: 'input', value: 56963 },
]

const withCategoryData = [
  { category: 'calculate', name: 'card', value: 89519 },
  { category: 'calculate', name: 'array', value: 49024 },
  { category: 'lavender', name: 'grocery', value: 90170 },
  { category: 'lavender', name: 'input', value: 56963 },
]

export default function Main() {
  return (
    <div>
      <Selector
        data={data}
        selectTitle="Items"
        selectedTitle="Cart"
        onChange={(values) => console.log(values)}
      />
      <Selector
        data={withCategoryData}
        categorize
        selectTitle="Items"
        selectedTitle="Cart"
        onChange={(values) => console.log(values)}
      />
    </div>
  )
}

Selector.propTypes = {
  /**
   * Data input for the selector
   */
  data: PropTypes.array,
  /**
   * Whether to display categories in the select list
   */
  categorize: PropTypes.bool,
  /**
   * Title for the select list
   */
  selectTitle: PropTypes.string,
  /**
   * Title for the selected list
   */
  selectedTitle: PropTypes.string,
  /**
   * Function for getting the selected values when anything changes
   */
  onChange: PropTypes.func,
}

Selector.defaultProps = {
  data: [],
  categorize: false,
  selectTitle: '',
  selectedTitle: '',
  onChange: () => {},
}

import 'react-awesome-selector/dist/style.css'