import React from "react";
import { connectStats } from "react-instantsearch-dom";
import styled from "styled-components";
import { Trans } from "react-i18next";
import { Breakpoint } from "@arcteryx/components-typography";

const SearchResultsContainer = styled.div`
  padding: 0 0.5rem 2rem;
  text-align: left;
  position: relative;
  z-index: 201;
  background-color: var(--white);
  top: -1px;
  p {
    max-width: initial;
  }
  ${Breakpoint("md")`
    padding: 0 0 2rem;
  `}
`;

const CountContainer = styled.div`
  max-width: 95.333rem;
  margin: auto;
  strong {
    font-family: var(--font-urw);
  }
  width: 98%;
  ${Breakpoint("sm")`
    width: 94%;
  `}
  ${Breakpoint("lg")`
    width: 88%;
  `}
`;

const Count = ({ nbHits, query }) => (
  <CountContainer>
    <p>
      <Trans ns="container-search" i18nKey="Search Result" values={{ nbHits, query }} components={[<strong />]} />
    </p>
  </CountContainer>
);

const ResultCount = connectStats(Count);

export const SearchResults = ({ query }) => (
  <SearchResultsContainer>
    <ResultCount query={query} />
  </SearchResultsContainer>
);