Refactor park detail address display

Implement the plan to refactor the address display in the park detail page. This includes updating the sidebar address to show the street address on its own line, followed by city, state, and postal code on the next line, and the country on a separate line. This change aims to create a more compact and natural address format.

src/components/homepage/FeaturedParks.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Star, TrendingUp, Award, Castle, FerrisWheel, Waves, Tent, LucideIcon } from 'lucide-react';
+import { formatLocationShort } from '@/lib/locationFormatter';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -82,7 +83,7 @@ export function FeaturedParks() {
             
             {park.location && (
               <p className="text-sm text-muted-foreground">
-                {park.location.city}, {park.location.country}
+                {formatLocationShort(park.location)}
               </p>
             )}
 

src/components/moderation/displays/RichParkDisplay.tsx

@@ -109,9 +109,11 @@ export function RichParkDisplay({ data, actionType, showAllFields = true }: Rich
             <span className="text-sm font-semibold text-foreground">Location</span>
           </div>
           <div className="text-sm space-y-1 ml-6">
+            {location.street_address && <div><span className="text-muted-foreground">Street:</span> <span className="font-medium">{location.street_address}</span></div>}
             {location.city && <div><span className="text-muted-foreground">City:</span> <span className="font-medium">{location.city}</span></div>}
             {location.state_province && <div><span className="text-muted-foreground">State/Province:</span> <span className="font-medium">{location.state_province}</span></div>}
             {location.country && <div><span className="text-muted-foreground">Country:</span> <span className="font-medium">{location.country}</span></div>}
+            {location.postal_code && <div><span className="text-muted-foreground">Postal Code:</span> <span className="font-medium">{location.postal_code}</span></div>}
             {location.formatted_address && (
               <div className="text-xs text-muted-foreground mt-2">{location.formatted_address}</div>
             )}

src/components/parks/ParkCard.tsx

@@ -1,4 +1,5 @@
 import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
+import { formatLocationShort } from '@/lib/locationFormatter';
 import { useNavigate } from 'react-router-dom';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -102,7 +103,7 @@ export function ParkCard({ park }: ParkCardProps) {
           <div className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
             <MapPin className="w-3 h-3 flex-shrink-0" />
             <span className="truncate">
-              {park.location.city && `${park.location.city}, `}{park.location.country}
+              {formatLocationShort(park.location)}
             </span>
           </div>
         )}

src/components/search/SearchResults.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useDebouncedValue } from '@/hooks/useDebouncedValue';
 import { useGlobalSearch } from '@/hooks/search/useGlobalSearch';
+import { formatLocationShort } from '@/lib/locationFormatter';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -87,7 +88,7 @@ export function SearchResults({ query, onClose }: SearchResultsProps) {
     switch (result.type) {
       case 'park':
         const park = result.data as Park;
-        return park.location ? `${park.location.city}, ${park.location.country}` : 'Theme Park';
+        return park.location ? formatLocationShort(park.location) : 'Theme Park';
       case 'ride':
         const ride = result.data as Ride;
         return ride.park && typeof ride.park === 'object' && 'name' in ride.park 

src/pages/ParkDetail.tsx

@@ -9,6 +9,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Separator } from '@/components/ui/separator';
 import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent, Plus } from 'lucide-react';
+import { formatLocationShort } from '@/lib/locationFormatter';
 import { useAuth } from '@/hooks/useAuth';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { RideCard } from '@/components/rides/RideCard';
@@ -248,7 +249,7 @@ export default function ParkDetail() {
                   </h1>
                   {park.location && <div className="flex items-center text-white/90 text-lg">
                       <MapPin className="w-5 h-5 mr-2" />
-                      {park.location.city && `${park.location.city}, `}{park.location.country}
+                      {formatLocationShort(park.location)}
                     </div>}
                   <div className="mt-3">
                     <VersionIndicator 
@@ -470,11 +471,25 @@ export default function ParkDetail() {
                           <div className="text-sm text-muted-foreground">
                             <div className="font-medium text-foreground mb-1">Address:</div>
                             <div className="space-y-1">
-                              {park.location.name && <div>{park.location.name}</div>}
+                              {/* Street Address on its own line if it exists */}
-                              {park.location.city && <div>{park.location.city}</div>}
+                              {park.location.street_address && (
-                              {park.location.state_province && <div>{park.location.state_province}</div>}
+                                <div>{park.location.street_address}</div>
-                              {park.location.postal_code && <div>{park.location.postal_code}</div>}
+                              )}
-                              <div>{park.location.country}</div>
+                              
+                              {/* City, State Postal on same line */}
+                              {(park.location.city || park.location.state_province || park.location.postal_code) && (
+                                <div>
+                                  {park.location.city}
+                                  {park.location.city && park.location.state_province && ', '}
+                                  {park.location.state_province}
+                                  {park.location.postal_code && ` ${park.location.postal_code}`}
+                                </div>
+                              )}
+                              
+                              {/* Country on its own line */}
+                              {park.location.country && (
+                                <div>{park.location.country}</div>
+                              )}
                             </div>
                           </div>