import*as t from"react";import s from"styled-components";import{Button as m}from"@redocly/theme/components/Button/Button";import{H2 as p}from"@redocly/theme/components/Typography/H2";import{getPathnameForLocale as d}from"@redocly/theme/core/utils";import{buildClientLoginUrl as f}from"../../utils";import{usePageProps as u}from"../../../providers/page-data/hooks";import{useL10nConfig as g}from"../../hooks";function w(){const r=u(),o=r?.authIdps||[],{defaultLocale:a,locales:n,currentLocale:i}=g(),[c,l]=t.useState();return t.useEffect(()=>{const e=new URLSearchParams(window.location.search);l(e.get("redirectTo")||void 0)},[]),t.createElement(h,null,t.createElement(p,{"data-cy":"login-title"},"Choose login method"),o.map(e=>t.createElement("div",{key:e.idpId},t.createElement("a",{href:f(e.idpId,e.type,d("",a,i,n),r.loginUrls,c)},t.createElement(m,{size:"large"},e.title||e.type)))))}const h=s.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-family-base);
  gap: var(--spacing-base);

  a {
    text-decoration: none;
  }
`;export{w as default};
