import { apiBase } from "@/lib/api";

export function GoogleButton({ label }: { label: string }) {
  return (
    <a href={`${apiBase}/auth/google`}
      className="w-full flex items-center justify-center gap-3 border border-slate-300 rounded-full py-3 font-semibold text-sm hover:bg-slate-50">
      <GoogleIcon />
      {label}
    </a>
  );
}

export function OrDivider({ text }: { text: string }) {
  return (
    <div className="flex items-center gap-3 my-5 text-xs text-slate-400">
      <span className="flex-1 h-px bg-slate-200" />
      {text}
      <span className="flex-1 h-px bg-slate-200" />
    </div>
  );
}

function GoogleIcon() {
  return (
    <svg className="h-5 w-5" viewBox="0 0 48 48">
      <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.1-2.3-.4-3.5z" />
      <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 4.1 29.6 2 24 2 15.4 2 8 6.9 6.3 14.7z" />
      <path fill="#4CAF50" d="M24 46c5.5 0 10.4-2.1 14.1-5.5l-6.5-5.5C29.6 36.9 26.9 38 24 38c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C8 41 15.4 46 24 46z" />
      <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.1-4.1 5.5l6.5 5.5C41.5 36.5 45 31 45 24c0-1.3-.1-2.3-.4-3.5z" />
    </svg>
  );
}