import React from 'react'
import Results from '../components/Results'
import { AiOutlineClose } from 'react-icons/ai'
import Link from 'next/link'

const SearchPage = () => {

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

                tablet:w-[70vw]

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

export default SearchPage