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

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

    const router = useRouter();
    const { locale } = router;
    return (
        <div className="card" id="searchforcase-card">
            <div className="card-body">
                <div className="govuk-body-m ">
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
                        <h1 className="govuk-fieldset__heading govuk-heading-m">
                            {t("search:search-title-label")}
                        </h1>
                    </legend>
                    <div className="govuk-form-group">
                        <label className="govuk-label" htmlFor="address-county">
                            {t("search:casereference-label")}
                        </label>
                        <input
                            className="govuk-input govuk-!-width-two-thirds"
                            id="address-county"
                            name="address-county"
                            type="text"
                        />
                    </div>
                    <fieldset className="govuk-fieldset">
                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
                            <h3 className="govuk-heading-m">
                                {t("search:sitelocation-legend")}
                            </h3>
                        </legend>
                        <div className="govuk-form-group">
                            <label
                                className="govuk-label"
                                htmlFor="address-line-1"
                            >
                                {t("search:address-line-one-label")}
                            </label>
                            <input
                                className="govuk-input"
                                id="address-line-1"
                                name="address-line-1"
                                type="text"
                                autoComplete="address-line1"
                            />
                        </div>

                        <div className="govuk-form-group">
                            <label
                                className="govuk-label"
                                htmlFor="address-town"
                            >
                                {t("search:town-label")}
                            </label>
                            <input
                                className="govuk-input govuk-!-width-two-thirds"
                                id="address-town"
                                name="address-town"
                                type="text"
                                autoComplete="address-level2"
                            />
                        </div>

                        <div className="govuk-form-group">
                            <label
                                className="govuk-label"
                                htmlFor="address-county"
                            >
                                {t("search:county-label")}
                            </label>
                            <input
                                className="govuk-input govuk-!-width-two-thirds"
                                id="address-county"
                                name="address-county"
                                type="text"
                            />
                        </div>

                        <div className="govuk-form-group">
                            <label
                                className="govuk-label"
                                htmlFor="address-postcode"
                            >
                                {t("search:postcode-label")}
                            </label>
                            <input
                                className="govuk-input govuk-input--width-10"
                                id="address-postcode"
                                name="address-postcode"
                                type="text"
                                autoComplete="postal-code"
                            />
                        </div>
                    </fieldset>
                    <div className="govuk-form-group">
                        <label
                            className="govuk-label"
                            htmlFor="address-postcode"
                        >
                            {t("search:lpa-label")}{" "}
                        </label>
                        <input
                            className="govuk-input govuk-input--width-10"
                            id="address-postcode"
                            name="address-postcode"
                            type="text"
                            autoComplete="postal-code"
                        />
                    </div>
                    <div className="govuk-form-group">
                        <label
                            className="govuk-label"
                            htmlFor="address-postcode"
                        >
                            {t("search:lpa-reference-label")}{" "}
                        </label>
                        <input
                            className="govuk-input govuk-input--width-10"
                            id="address-postcode"
                            name="address-postcode"
                            type="text"
                            autoComplete="postal-code"
                        />
                    </div>
                    <div className="govuk-form-group">
                        <label className="govuk-label" htmlFor="sort">
                            {t("search:case-type-label")}{" "}
                        </label>
                        <select className="govuk-select" id="sort" name="sort">
                            <option value="">
                                {t("search:case-type-option-1")}
                            </option>
                            <option value="Any/All">
                                {t("search:case-type-option-2")}
                            </option>
                            <option value="Advertisement Appeals">
                                {t("search:case-type-option-3")}
                            </option>
                            <option value="Called in Planning Applications">
                                {t("search:case-type-option-4")}
                            </option>
                            <option value="Discontinuance Notice Appeals">
                                {t("search:case-type-option-5")}
                            </option>
                            <option value="Enforcement Listed Building and Conservation Area Appeals">
                                {t("search:case-type-option-6")}
                            </option>
                            <option value="Enforcement Appeals">
                                {t("search:case-type-option-7")}
                            </option>
                            <option value="Householder Appeals">
                                {t("search:case-type-option-8")}
                            </option>
                            <option value="Lawful Development Certificate Appeals">
                                {t("search:case-type-option-9")}
                            </option>
                            <option value="Planning Appeals">
                                {t("search:case-type-option-10")}
                            </option>
                            <option value="Planning Obligation Appeals">
                                {t("search:case-type-option-11")}
                            </option>
                            <option value="Planning Listed Building and Conservation Area Appeals">
                                {t("search:case-type-option-12")}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    );
}