import React from "react";
import {Head} from "@inertiajs/inertia-react";

export default function Steps({step}) {
    return (
        <ul className="steps inline-flex mx-auto mb-5">
            <Head>
                <title>{_translations.fulfill_data}</title>
            </Head>
            <li className={"position-relative " + (step === 1 ? "active": "") + (step > 1 ? "done" : "")}>
                <span>{_translations.welcome}</span>
            </li>
            <li className={"position-relative " + (step === 2 ? "active": "") + (step > 2 ? "done" : "")}>
                <span>{_translations.gallery}</span>
            </li>
            <li className={"position-relative " + (step === 3 ? "active": "") + (step > 3 ? "done" : "")}>
                <span>{_translations.exposition}</span>
            </li>
            <li className={"position-relative " + (step === 4 ? "active": "") + (step > 4 ? "done" : "")}>
                <span>{_translations.artworks}</span>
            </li>
            <li className={"position-relative " + (step === 5 ? "active": "") + (step > 5 ? "done" : "")}>
                <span>{_translations.summary}</span>
            </li>
        </ul>)
}
