import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import SearchForCase from "./search/searchforcase";
import SearchResults from "./search/searchresults";

export default function Search(props) {
    const { searchString, searchResultsObj } = props;
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    return (
        <main
            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
            id="main-content"
            role="main"
        >
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <SearchResults
                        searchString={searchString}
                        searchResultsObj={searchResultsObj.searchResultsObj}
                        searchDetailsObj={searchResultsObj.searchDetailsObj}
                    />
                </div>
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <div className="govuk-button-group">
                        <Link href="/advancedsearch">
                            <a className="govuk-button">
                                {t("search:searchresults-search-button-label")}
                            </a>
                        </Link>
                        <a
                            onClick={() => router.back()}
                            className="govuk-button govuk-button--secondary"
                        >
                            {t("search:searchresults-new-search-button-label")}
                        </a>
                    </div>
                </div>
            </div>
        </main>
    );
}