import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";

export default function CaseSearch() {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    return (
        <div className="card" id="casesearch-card">
            <div className="card-body">
                <h3 className="heading-small card-heading">
                    {t("home:casesearch-card-title")}
                </h3>
                <div className="govuk-form-group">
                    <div id="event-name-hint" className="govuk-hint ">
                        {t("home:casesearch-card-search-hint")}:
                        <br />
                        <span className="govuk-body-s">
                            {" "}
                            <span className="govuk-!-font-weight-bold">
                                {t("home:casesearch-card-search-example-label")}
                                :
                            </span>{" "}
                            APP/A1234/A/99/1234567
                        </span>
                    </div>
                    <input
                        className="govuk-input"
                        id="event-name"
                        name="event-name"
                        type="text"
                        aria-describedby="event-name-hint"
                    />
                </div>
                <div className="govuk-form-group">
                    <Link href="/searchresults">
                        <a className="govuk-button">
                            {t("home:casesearch-card-button")}
                        </a>
                    </Link>
                </div>
                <Link href="/advancedsearch">
                    <a>{t("home:casesearch-card-advanced-link")}</a>
                </Link>
            </div>
        </div>
    );
}