'use client'
import localFont from "next/font/local";
import { Calendar, MagnifyingGlass, MapPin, User } from "@phosphor-icons/react";
import arrow from '../../../public/arrow.png'
import Image from "next/image";


const figtree = localFont({
    src: [
        {
            path: '../../../public/Fonts/figtree/figtree.ttf',
        },
    ],
})

function Search() {
    return (
        <div className="mb-10">
             <div className="absolute top-[40%] left-[0%]">
                <Image src={arrow} alt="arrow" width={300} height={300} />
            </div>
            <div className="flex flex-col w-full items-center justify-center">
                <div className="flex flex-row w-[60%] p-6 border border-black border-4 rounded-lg justify-evenly">
                    <div className="flex flex-row gap-11">
                        {/* First Column */}
                        <div className="flex flex-row items-center justify-center gap-2 hover:scale-105 transition-all duration-300 cursor-pointer">
                            <MapPin className="w-8 h-8" />
                            <div>
                                <p className={`${figtree.className} text-lg font-light`}>Location</p>
                                <h3 className={`${figtree.className} text-xl font-bold`}>Anywhere</h3>
                            </div>
                        </div>
                        {/* Separator */}
                        <div className="border border-black border-1 w-0 h-14"></div>
                    {/* Second Column */}
                    <div className="flex flex-row items-center justify-center gap-2 hover:scale-105 transition-all duration-300 cursor-pointer">
                        <Calendar className="w-8 h-8" />
                        <div>
                            <p className={`${figtree.className} text-lg font-light`}>Check in</p>
                            <h3 className={`${figtree.className} text-xl font-bold`}>Anytime</h3>
                        </div>
                    </div>
                    {/* Separator */}
                    <div className="border border-black border-1 w-0 h-14"></div>
                    {/* Third Column */}
                    <div className="flex flex-row items-center justify-center gap-2 hover:scale-105 transition-all duration-300 cursor-pointer">
                        <Calendar className="w-8 h-8" />
                        <div>
                            <p className={`${figtree.className} text-lg font-light`}>Check out</p>
                            <h3 className={`${figtree.className} text-xl font-bold`}>Anytime</h3>
                        </div>
                    </div>
                    {/* Separator */}
                    <div className="border border-black border-1 w-0 h-14"></div>
                    {/* Fourth Column */}
                    <div className="flex flex-row items-center justify-center gap-2 hover:scale-105 transition-all duration-300 cursor-pointer">
                        <User className="w-8 h-8" />
                        <div>
                            <p className={`${figtree.className} text-lg font-light`}>Guests</p>
                            <h3 className={`${figtree.className} text-xl font-bold`}>Add guests</h3>
                        </div>
                    </div>
                    {/* Separator */}
                    <div className="border border-black border-1 w-0 h-14"></div>
                    {/* Fifth Column */}
                    <div className="flex flex-row items-center justify-center gap-2 hover:scale-105 transition-all duration-300 cursor-pointer">
                        <div className="p-2 rounded-full bg-[#E7FE78]">
                        <MagnifyingGlass className="w-10 h-10" />
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    )
}

export default Search;