import { AiOutlineSearch, AiOutlineClose } from 'react-icons/ai'
import Link from 'next/link'
import { useRef } from 'react'
import { useRouter } from 'next/router'

export default function Home({data}) {
  const router = useRouter()
  const searchInputRef = useRef("")

  const search = () => {
    const term = searchInputRef.current.value
    if(!term) return
    router.push(`/search?term=${term}`)
  }

  const enterHandler = (e) => {
    const term = searchInputRef.current.value
    if(e.key === "Enter" && term !== "") router.push(`/search?term=${term}`)
  }

  return (
    <div className="flex flex-col justify-center items-center w-[100vw] h-[50vh]">
      <div className="p-10 ">
        <p className="text-6xl text-white font-serif">KitabCitab</p>
      </div>
      <div className="group
        hover:bg-[#303134]
        py-2 border-[1px] w-[90%]
        border-[#bdc1c6] rounded-3xl flex flex-row justify-around

        tablet:w-[70%]

        laptop:w-[40%]
        "
      >
        <i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => search()}><AiOutlineSearch size={25}/></i>
        <input ref={searchInputRef} onKeyDown={(e) => enterHandler(e)} className="bg-[#202124] group-hover:bg-[#303134] w-[80%] px-2 active:border-none text-white outline-none text-xl"/>
        <i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => (searchInputRef.current.value = "")}><AiOutlineClose size={25} /></i>
      </div>
      <button
        className='py-1 px-10 mt-10  text-3xl rounded-md bg-[#303134] text-white font-serif border-[1px] border-[#303134] hover:border-[#fff] hover:border-[1px]'
        onClick={() => search()}
      >
        Traži
      </button>
    </div>

    
  )
}