"use client"
import { SocialButton } from "./SocialButton"
import Link from "next/link"
import { toast } from "sonner"
import DiscordButton from "./DiscordButton"
import GoogleButton from "./GoogleButton"

export function LoginForm() {

  const handleAppleLogin = () => {
    toast.info("Apple Sign In", {
      description: "Apple登录功能正在开发中..."
    })
  }

  return (
    <div className="w-full space-y-3 sm:space-y-4">
      <div className="text-center mb-4 sm:mb-6">
        <h2 className="txt-title-m sm:txt-title-l">Log in/Sign up</h2>
        <p className="text-gradient mt-3 sm:mt-4 text-sm sm:text-base">Chat, Crush, AI Date</p>
      </div>

      <div className="space-y-3 sm:space-y-4 mt-4 sm:mt-6">
        <DiscordButton />

        <GoogleButton />

        <SocialButton
          icon={<i className="iconfont icon-social-apple !text-[20px] sm:!text-[24px]"></i>}
          onClick={handleAppleLogin}
        >
          Continue with Apple
        </SocialButton>
      </div>

      <div className="text-center mt-4 sm:mt-6">
        <p className="txt-body-s sm:txt-body-m text-txt-secondary-normal">
          By continuing, you agree to CrushLevel's{" "}
          <Link href="/policy/tos" target="_blank" className="text-primary-variant-normal">
            User Agreement
          </Link>{" "}
          and{" "}
          <Link href="/policy/privacy" target="_blank" className="text-primary-variant-normal">
            Privacy Policy
          </Link>
        </p>
      </div>
    </div>
  )
}