import { Icon } from "../../components/ui/Icon";

interface LoginBrandProps {
  oauthChecking: boolean;
  oauthReady: boolean;
}

function VignetteMark() {
  return (
    <span className="lg-mark" aria-hidden="true">
      <svg viewBox="0 0 26 26" width={26} height={26} fill="none">
        <circle cx="13" cy="13" r="11" stroke="currentColor" strokeWidth="2" />
        <path
          d="M8 14.5c1.4 1.7 3 2.5 5 2.5s3.6-.8 5-2.5"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
        />
        <circle cx="13" cy="9" r="1.6" fill="var(--clay)" />
      </svg>
    </span>
  );
}

export function LoginBrand({ oauthChecking, oauthReady }: LoginBrandProps) {
  return (
    <section className="lg-brand" aria-label="Vignette">
      <div className="lg-wordmark">
        <VignetteMark />
        <span>Vignette</span>
      </div>

      <div className="lg-copy">
        <span className="lg-kicker">
          <span className="d" aria-hidden="true" />
          상담 시뮬레이션 학습
        </span>
        <h1>
          <span className="lg-highlight">상담을 연습하고,</span>
          <br />
          함께 돌아봅니다.
        </h1>
        <p>
          가상 내담자와 상담을 연습하고, 회기 기록과 피드백으로 다음 연습을 준비하세요.
        </p>
      </div>

      <div className="lg-policy">
        <span>
          <Icon name="shield" size={17} />
          Google 로그인
        </span>
        <b>{oauthChecking ? "확인 중" : oauthReady ? "모든 Google 계정" : "설정 필요"}</b>
      </div>
    </section>
  );
}