import ProviderButton from './ProviderButton'
import { useAuth } from '../context/AuthContext'

/**
 * Dark Final Round Sign In page shown when View All / Live Board
 * requires a verified identity. Demo auth only — no passwords.
 */
export default function AuthGate({ onSuccess }) {
  const { login } = useAuth()

  const handleProvider = (provider) => {
    login(provider)
    onSuccess?.(provider)
  }

  return (
    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center bg-black px-4 py-16">
      <div className="w-full max-w-[400px] rounded-2xl bg-[#1a1a1a] px-8 py-10">
        <h1 className="brand-heading text-center text-[28px] font-bold leading-tight text-white">
          Final Round Sign In
        </h1>
        <p className="mt-3 text-center text-[15px] leading-snug text-[#a3a3a3]">
          Connect a social account to cast your committee finals vote
        </p>

        <div className="mt-8 space-y-3">
          <ProviderButton provider="instagram" variant="panel" onClick={handleProvider} />
          <ProviderButton provider="twitter" variant="panel" onClick={handleProvider} />
          <ProviderButton provider="microsoft" variant="panel" onClick={handleProvider} />
        </div>

        <p className="mt-8 text-center text-[12px] leading-relaxed text-[#737373]">
          Privacy first. Your account is used only to verify one vote per finalist.
        </p>
      </div>
    </div>
  )
}
