"use strict";

import React, { useState } from 'react';
import styled from 'styled-components/native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DropdownContainer = styled.View`
  position: relative;
  display: inline-block;
`;
const DropdownButton = styled.TouchableOpacity`
  background-color: transparent;
  border: none;
  cursor: pointer;
`;
const DropdownIcon = styled.Text`
  margin-left: 5px;
`;
const DropdownList = styled.View`
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
`;
const DropdownItem = styled.Text`
  padding: 10px;
  cursor: pointer;

  &:hover {
    background-color: #f2f2f2;
  }
`;
const DropdownMenu = ({
  sortFunction,
  icon,
  values
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const handleItemClick = value => {
    sortFunction(value);
    setIsOpen(false);
  };
  return /*#__PURE__*/_jsxs(DropdownContainer, {
    children: [/*#__PURE__*/_jsx(DropdownButton, {
      onPress: () => setIsOpen(!isOpen),
      children: icon && /*#__PURE__*/_jsx(DropdownIcon, {
        children: icon
      })
    }), isOpen && /*#__PURE__*/_jsx(DropdownList, {
      children: values.map(value => /*#__PURE__*/_jsx(DropdownItem, {
        onPress: () => handleItemClick(value),
        children: value
      }, value))
    })]
  });
};
export default DropdownMenu;
//# sourceMappingURL=index.js.map