import React from 'react'
import { AiOutlineClose } from 'react-icons/ai'

const SearchPage = () => {

  return (
    <>
        <div className="flex flex-col laptop:flex-row flex-wrap items-start w-[100vw] laptop:w-[80vw] h-[100vh]">
            <div className="p-10 w-[100vw] laptop:w-[20vw]">
                <a href='/'><p className="text-5xl tablet:text-6xl laptop:text-3xl text-white text-center font-serif ">KitabCitab</p></a>
            </div>
            <div className="group
                my-3
                mx-auto
                py-5 
                h-[4vh]
                max-w-[90vw]
                bg-[#303134]
                border-[1px] w-[90%] border-[#bdc1c6] rounded-3xl 
                flex flex-row justify-around items-center

                tablet:w-[70%]

                laptop:w-[40vw]
                laptop:mx-0
                laptop:my-10
                laptop:justify-between
                "
            >
                <input className="bg-[#303134] ml-5 w-[80%] active:border-none text-white outline-none text-lg "/>
                <a className='rounded-3xl hover:border-black text-[#9aa0a6] px-3 py-auto' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></a>
            </div>
        </div>
    </>
  )
}

export default SearchPage