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

const TopThree = (props) => {
    let { t } = useTranslation();
    const { showTopThree } = props;

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

    let topthreeRow = [];

    for (var i = 0; i < 3; i++)
        topthreeRow.push(
            <div className="cardModuleItem" key={i}>
                <div className="cardModuleDetails">
                    <div className="cardModuleReference">
                        <b>Case reference:</b>{" "}
                        <Link href="/case">
                            <a>{props.showTopThree.value[i].reference}</a>
                        </Link>
                    </div>
                    <div className="carModuleAddress">
                        <b>Address: </b> {props.showTopThree.value[i].address}
                    </div>
                </div>
                <div className="cardModuleRemoveCase"> &mdash;</div>
            </div>
        );

    return <>{topthreeRow}</>;
};

export default TopThree;