import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
import Link from "next/link"
import Page from '../../../components/Page'

const result = () => {

  return (
    <>
        <div className="flex flex-col laptop:flex-row flex-wrap items-start w-[100vw] laptop:w-[84vw] laptop:min-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-[5vh]
                min-w-[90vw]
                w-[90vw]
                bg-[#202124]
                flex flex-row justify-around items-center

                tablet:w-[70vw]

                laptop:min-w-[40vw]
                laptop:w-[60vw]
                laptop:mx-0
                laptop:my-10
                laptop:justify-between
                "
            >
                <i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => console.log("Prev page")}><AiOutlineLeft size={25} /></i>
                <p className="text-xl tablet:text-2xl laptop:text-3xl text-[#fff] font-serif text-center">"Hamine pustolovine", Muhamed Ahmed Mustafa, str.71</p>
                <i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => console.log("Next page")}><AiOutlineRight size={25} /></i>
            </div>
            <Page />
        </div>  
    </>
  )
}

export default result