import Card from '../components/Card'
import { useSession } from 'next-auth/client'
import { Text } from "@chakra-ui/react"
import Hero from '../components/Hero/Hero'
import { CTA } from '../components/CTA'
import { Features } from '../components/Features/Features'
import { Footer } from '../components/Footer/Footer'
import { motion } from 'framer-motion'
import StatCard from '../components/StatCard'
import Testimonials from '../components/Testimonials/Testimonials'
import AuthButton from '../components/AuthButton'

export default function Home() {

  const container = {
    hidden: { opacity: 1, scale: 0 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        delayChildren: 0.4,
        staggerChildren: 0.3
      }
    }
  }


  const [session, loading] = useSession()

  return (

    <>
      {!session && <>
        <Hero/>
        <Features />
        <Testimonials/>
        <CTA />
        <Footer />
      </>
      }
      {session && <>
        <Text fontSize='4xl'>Welcome {session.user.name}!</Text>
        <motion.div className='grid' variants={container} initial="hidden" animate="visible" exit={{ opacity: 0 }}>
          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
          <StatCard/>
        </motion.div>
        <AuthButton/>
        {JSON.stringify(session.user)}
      </>
      }
    </>
  )
}