update search

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 (
     <div
@@ -36,7 +79,7 @@ const Search = () => {
             font-semibold
           "
         >
-          Anywhere
+          {locationLabel}
         </div>
         <div
           className="
@@ -50,7 +93,7 @@ const Search = () => {
             sm:block
           "
         >
-          Any Week
+          {durationLabel}
         </div>
         <div
           className="
@@ -64,7 +107,7 @@ const Search = () => {
             text-gray-600
           "
         >
-          <div className="hidden sm:block"> Add Guest</div>
+          <div className="hidden sm:block">{guestLabel}</div>
           <div
             className="
               rounded-full