'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="mb-4 text-center sm:mb-6">
        <h2 className="txt-title-m sm:txt-title-l">Log in/Sign up</h2>
        <p className="text-gradient mt-3 text-sm sm:mt-4 sm:text-base">Chat, Crush, AI Date</p>
      </div>

      <div className="mt-4 space-y-3 sm:mt-6 sm:space-y-4">
        <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="mt-4 text-center 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>
  )
}