import React from 'react';
import { SignIn, SignUp } from '@clerk/clerk-react';
import { useLocation } from 'react-router-dom';
import { motion } from 'framer-motion';

const AuthPage: React.FC = () => {
    const location = useLocation();
    const isSignUp = location.pathname.startsWith('/sign-up');

    return (
        <div style={{
            minHeight: '100vh',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: 'radial-gradient(ellipse at top, rgba(16, 185, 129, 0.15) 0%, var(--bg-base) 70%)',
            position: 'relative'
        }}>
            <div className="blobs" style={{ position: 'absolute', width: '100%', height: '100%', overflow: 'hidden', zIndex: 0, pointerEvents: 'none' }}>
                <div style={{ position: 'absolute', top: '10%', left: '20%', width: '400px', height: '400px', background: 'var(--accent-green)', filter: 'blur(150px)', opacity: 0.1, borderRadius: '50%' }}></div>
                <div style={{ position: 'absolute', bottom: '10%', right: '20%', width: '300px', height: '300px', background: 'var(--accent-blue)', filter: 'blur(150px)', opacity: 0.1, borderRadius: '50%' }}></div>
            </div>
            
            <motion.div 
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                style={{ zIndex: 1, position: 'relative' }}
            >
                {isSignUp ? (
                    <SignUp forceRedirectUrl="/dashboard" signInUrl="/sign-in" />
                ) : (
                    <SignIn forceRedirectUrl="/dashboard" signUpUrl="/sign-up" />
                )}
            </motion.div>
        </div>
    );
};

export default AuthPage;