//login page.tsx
import Link from 'next/link'
import { headers, cookies } from 'next/headers'
import { createClient } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'
import RiveLogo from '../../components/RiveLogo'
import { useTheme } from 'next-themes';

const { resolvedTheme } = useTheme();

export default function Login({
  searchParams,
}: {
  searchParams: { message: string }
}) {
  const signIn = async (formData: FormData) => {
    'use server'

    const email = formData.get('email') as string
    const password = formData.get('password') as string
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })

    if (error) {
      return redirect('/login?message=Could not authenticate user')
    }

    return redirect('/')
  }

  return (
    <div className="flex flex-col items-center justify-center w-full px-8 sm:max-w-md">
    <RiveLogo key={resolvedTheme} />
    </div>
  )
}

// RiveLogo.tsx
'use client';
import { useRive } from '@rive-app/react-canvas';
import { useTheme } from 'next-themes';

const RiveLogo = () => {
  const { resolvedTheme } = useTheme();
  console.log("Current theme:", resolvedTheme); // Log the current theme
  const logoSrc = resolvedTheme === 'dark' 
    ? "/JobsBringerLogoDarkAnimated.riv" 
    : "/JobsBringerLogoLightAnimated.riv";

  const { RiveComponent } = useRive({
    src: logoSrc,
    autoplay: true,
  });

  return (
    <div style={{ width: '300px', height: '300px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <RiveComponent />
    </div>
  );
};

export default RiveLogo;