import React from "react";
import InputField from "../input-field/InputField";
import { Oval } from "react-loader-spinner";

import "./search-styles.scss";
import { OptionProps, SearchProps } from "@app/models/components";
import Option from "../option/Option";

const Search: React.FC<SearchProps> = ({ inputProps, items, isLoading }) => {
  return (
    <div className="search-container">
      <InputField {...inputProps} />
      {!!items.length && (
        <div className="searched-items">
          {items.map((ele: OptionProps, index: number) => (
            <Option {...ele} key={index} />
          ))}
        </div>
      )}
      {!items.length && isLoading && (
        <div className="search-loader">
          <Oval
            height={20}
            width={20}
            color="#878787"
            wrapperStyle={{}}
            wrapperClass=""
            visible={true}
            ariaLabel="oval-loading"
            secondaryColor="#878787"
            strokeWidth={6}
            strokeWidthSecondary={6}
          />
        </div>
      )}
    </div>
  );
};

export default Search;