diff --git a/components/navbar/Search.tsx b/components/navbar/Search.tsx index 1b9489b..2ec6664 100644 --- a/components/navbar/Search.tsx +++ b/components/navbar/Search.tsx @@ -1,10 +1,53 @@ 'use client'; +import useCountries from '@/hooks/useCountries'; import useSearchModal from '@/hooks/useSearchModal'; +import { differenceInDays } from 'date-fns'; +import { useSearchParams } from 'next/navigation'; +import { useMemo } from 'react'; import { BiSearch } from 'react-icons/bi'; const Search = () => { const searchModal = useSearchModal(); + const params = useSearchParams(); + const { getByValue } = useCountries(); + + const locationValue = params?.get('locationValue'); + const startDate = params?.get('startDate'); + const endDate = params?.get('endDate'); + const guestCount = params?.get('guestCount'); + + const locationLabel = useMemo(() => { + if (locationValue) { + return getByValue(locationValue as string)?.label; + } + + return 'Anywhere'; + }, [locationValue, getByValue]) + + const durationLabel = useMemo(() => { + if (startDate && endDate) { + const start = new Date(startDate as string); + const end = new Date(endDate as string); + let diff = differenceInDays(end, start); + + if (diff === 0) { + diff = 1; + } + + return `${diff} Days`; + } + + return 'Any week'; + }, [startDate, endDate]) + + const guestLabel = useMemo(() => { + if (guestCount) { + return `${guestCount} Guests`; + } + + return 'Add Guests'; + }, [guestCount]) return (