import React from "react";
import { Search, SearchResultHeader, SearchResultItem } from "../../";

export default (
  <div className="m-5">
    <div className="my-5">
      <Search
        onChange={value => {
          console.log(value);
        }}
        ariaLabel="Products Search"
        placeholder="Search by keyword"
        size="sm"
      >
        <SearchResultHeader>Recent</SearchResultHeader>
        <SearchResultItem href="path-to">Repository a</SearchResultItem>
        <SearchResultItem onClick={() => {}}>john Wick</SearchResultItem>

        <SearchResultHeader>Saved Filters</SearchResultHeader>
        <SearchResultItem href="path-to">spring-pipeline</SearchResultItem>
        <SearchResultItem href="path-to">Repository c of master branch</SearchResultItem>

        <SearchResultHeader>Quick Filters</SearchResultHeader>
        <SearchResultItem onClick={() => {}}>Me</SearchResultItem>
        <SearchResultItem onClick={() => {}}>MyTeam</SearchResultItem>
      </Search>
    </div>
  </div>
);