"use client"
import React from 'react'
import Hero from './Hero'
import { LoginLink, RegisterLink } from '@kinde-oss/kinde-auth-nextjs'

const Header = () => {
  return (
    <div className='w-full h-screen justify-center items-center bg-[#F3F3F3] px-5 py-5 sm:py-10 sm:px-10 md:px-20 lg:px-[150px] xl:px-[200px]'>
        <div className="flex justify-between items-center ">
            <div>
                <p className='text-xl uppercase font-semibold tracking-wide'>Schedule.Me</p>
            </div>
            <div className='flex gap-2'>
                <LoginLink>
                  <button className='px-2 py-1 sm:px-4 sm:py-2 bg-[#101010] text-white rounded-md font-semibold hover:opacity-85 duration-300 text-sm sm:text-md'>Login</button>
                </LoginLink>
                <RegisterLink>
                  <button className='px-2 py-1 sm:px-4 sm:py-2 border border-[#101010] hover:bg-[gray] hover:border-[gray] hover:text-white rounded-md duration-300 text-sm sm:text-md'>Sign Up</button>
                </RegisterLink>
            </div>
        </div>
        <Hero/>
    </div>
  )
}

export default Header