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

export default function HomePage() {
  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={() => console.log("Search for results")}><AiOutlineSearch size={25}/></i>
        <input 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={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></i>
      </div>
      <Link href='/search'><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={() => console.log("Searching")}
      >
        Traži
      </button></Link>
    </div>

    
  )
}