import { useSelector } from "react-redux";
import { AppState } from "@/state/reducer";
import { InsuranceState } from "@/state/reducer/insurance";
import { Actions, Step } from "@/components";
import { useTranslation } from "react-i18next";
import React from "react";
import { ContactAction } from "@/pages/steps/common";
import { useDeadlines } from "@/hooks";
import { StepProps } from "@material-ui/core";

export const InsuranceStep = (props: StepProps) => {
    const insurance = useSelector<AppState, InsuranceState>(root => root.insurance);
    const deadline  = useDeadlines().insurance;

    const { t } = useTranslation();

    return <Step { ...props } label={ t("steps.insurance.header") } until={ deadline } completed={ insurance.signed } active={ !insurance.signed }>
        <p>{ t(`steps.insurance.instructions`) }</p>
        <Actions>
            <ContactAction />
        </Actions>
    </Step>
}