import localFont from "next/font/local";
import { CubeIcon  } from "@phosphor-icons/react";
import { SearchIcon } from "lucide-react";

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

const MapPinIcon = ({ className }: { className: string }) => {
    return (
        <svg className={className} xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M184,72a56,56,0,1,0-64,55.42V232a8,8,0,0,0,16,0V127.42A56.09,56.09,0,0,0,184,72Zm-56,40a40,40,0,1,1,40-40A40,40,0,0,1,128,112Z"></path></svg>
    )
}

const ChevronDownIcon = ({ className }: { className: string }) => {
    return (
        <svg className={className} xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg>
    )
}

const CalendarIcon = ({ className }: { className: string }) => {
    return (
        <svg className={className} xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"></path></svg>
    )
}

const UserIcon = ({ className }: { className: string }) => {
        return (
            <svg className={className} xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z"></path></svg>
    )
}

function SearchBy() {
    return (
        <div>
            <div className="flex flex-col justify-center p-4">
                <div className="justify-center pb-4">
                    <h1 className={`${figtree.className} text-4xl font-medium`}>Places to stay</h1>
                </div>
                <div className="flex flex-row justify-center gap-4">
                    {/* Location */}
                    <div className="flex flex-row gap-2 border border-black border-2 py-2 w-[30%] items-center justify-between px-4">
                        <div className="flex flex-row gap-2 items-center justify-center">
                        <MapPinIcon className="w-6 h-6" />
                        <p className={`${figtree.className} text-lg font-medium`}>Karachi, Pakistan</p>
                        </div>
                        <div>
                        <ChevronDownIcon className="w-6 h-6" />
                        </div>
                    </div>

                    {/* Check in/out */}
                    <div className="flex flex-row gap-2 border border-black border-2 py-2 w-[30%] items-center justify-between px-4">
                        <div className="flex flex-row gap-2 items-center justify-center">
                        <CalendarIcon className="w-6 h-6" />
                        <p className={`${figtree.className} text-lg font-medium`}>Fri, Nov 14</p>
                        <p className={`${figtree.className} text-lg font-medium`}>-</p>
                        <p className={`${figtree.className} text-lg font-medium`}>Sat, Nov 15</p>
                        </div>
                        <div>
                        <ChevronDownIcon className="w-6 h-6" />
                        </div>
                    </div>

                    {/* Guests */}
                    <div className="flex flex-row gap-2 border border-black border-2 py-2 w-[30%] items-center justify-between px-4">
                        <div className="flex flex-row gap-2 items-center justify-center">
                        <UserIcon className="w-6 h-6" />
                        <p className={`${figtree.className} text-lg font-medium`}>2 Adults</p>
                        <p>.</p>
                        <p className={`${figtree.className} text-lg font-medium`}>1 Child</p>
                        </div>
                        <div>
                        <ChevronDownIcon className="w-6 h-6" />
                        </div>
                    </div>

                    {/* Search */}
                    <button className="flex flex-row gap-2 border border-black border-2 py-2 items-center justify-between px-4 bg-[#E7FE78]">
                        <SearchIcon className="w-6 h-6" />
                        <p className={`${figtree.className} text-lg font-medium`}>Search</p>
                    </button>
            </div>

            <div className="flex flex-row justify-between pt-4">
                {/* Filters */}
                <div className="flex flex-row items-center justify-center gap-2">

                    <h2 className={`${figtree.className} text-md font-medium text-gray-500`}>Filters:</h2>

                    <button className="flex flex-row items-center justify-between">
                    <p className={`${figtree.className} text-md font-medium`}>Standard</p>
                    </button>
                    <ChevronDownIcon className="w-3 h-3 mt-1" />
                </div>

                {/* Sort by */}
                <div className="flex flex-row items-center justify-center gap-2">
                    <h2 className={`${figtree.className} text-md font-medium text-gray-500`}>Sort by:</h2>
                    <button className="flex flex-row items-center justify-between">
                    <p className={`${figtree.className} text-md font-medium`}>Revelance</p>
                    </button>
                    <ChevronDownIcon className="w-3 h-3 mt-1" />
                </div>
            </div>
            </div>
        </div>  
    )
}

export default SearchBy;