import { useEffect } from "react";
import { useAuth } from "../components/AuthContext";
import Card from "../components/Card"

export default function Landing({ onLogin }: { onLogin: () => void }) {
    const {token} = useAuth();

    useEffect(() => {
     console.log(token)
    }, []);
  
  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-600 to-purple-700 text-white">
      <div className="max-w-6xl mx-auto px-6 py-24 text-center">
        <h1 className="text-5xl font-bold mb-6">Studia</h1>
        <p className="text-xl opacity-90 mb-12">
          Learn smarter with flashcards & spaced repetition
        </p>

        <div className="grid md:grid-cols-3 gap-6 mb-12">
          {["HTTP", "JWT", "REST"].map(t => (
            // <div key={t} className="bg-white/10 p-6 rounded-xl backdrop-blur">
            //   <h3 className="font-semibold text-lg">{t}</h3>
            //   <p className="opacity-80 mt-2">Sample definition</p>
            // </div> 
            <Card front={t} back="Sample definition"></Card>
          ))}
        </div>
          {token? (
            <div> </div>
       ) :  
        ( 
           <button
          onClick={onLogin}
          className="bg-white text-indigo-700 px-8 py-3 rounded-xl font-semibold hover:scale-105 transition"
        >
          Get Started
        </button>
        ) }
      </div>
    </div>
  );
}
