import { Link } from "react-router-dom";
import { useI18n } from "../../i18n/I18nContext";
import { useFirstRun } from "../../firstRun/FirstRunContext";

export function FirstRunBar() {
  const { t } = useI18n();
  const { active, current } = useFirstRun();
  if (!active || !current) return null;

  return (
    <div className="hb-first-run" role="region" aria-label={t("firstRun.aria")}>
      <div className="hb-first-run__copy">
        <strong>{t("firstRun.title")}</strong>
        <p>{t("firstRun.subtitle")}</p>
      </div>
      <div className="hb-first-run__actions">
        <Link className="hb-btn hb-btn--secondary" to={current.to}>
          {t("firstRun.step.crew")}
        </Link>
      </div>
    </div>
  );
}
