Refactor: Replace emojis with Lucide React icons

src/components/parks/ParkCard.tsx

@@ -1,4 +1,4 @@
-import { MapPin, Star, Users, Clock } from 'lucide-react';
+import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -21,11 +21,11 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
 
   const getParkTypeIcon = (type: string) => {
     switch (type) {
-      case 'theme_park': return '🏰';
-      case 'amusement_park': return '🎢';
-      case 'water_park': return '🏊';
-      case 'family_entertainment': return '🎪';
-      default: return '🎡';
+      case 'theme_park': return <Castle className="w-5 h-5" />;
+      case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
+      case 'water_park': return <Waves className="w-5 h-5" />;
+      case 'family_entertainment': return <Tent className="w-5 h-5" />;
+      default: return <FerrisWheel className="w-5 h-5" />;
     }
   };
 
@@ -50,7 +50,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
             />
           ) : (
-            <div className="text-6xl opacity-50">
+            <div className="opacity-50 flex items-center justify-center">
               {getParkTypeIcon(park.park_type)}
             </div>
           )}
@@ -73,7 +73,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                 {park.name}
               </h3>
-              <span className="text-xl">{getParkTypeIcon(park.park_type)}</span>
+              {getParkTypeIcon(park.park_type)}
             </div>
             
             {park.location && (
@@ -105,7 +105,7 @@ export function ParkCard({ park, onClick }: ParkCardProps) {
               </div>
               <div className="flex items-center gap-1">
                 <span className="text-accent font-medium">{park.coaster_count}</span>
-                <span className="text-muted-foreground">🎢</span>
+                <FerrisWheel className="w-3 h-3 text-muted-foreground" />
               </div>
             </div>
             

src/components/parks/ParkGrid.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Search, Filter, MapPin, SlidersHorizontal } from 'lucide-react';
+import { Search, Filter, MapPin, SlidersHorizontal, FerrisWheel } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -240,7 +240,7 @@ export function ParkGrid() {
       {/* Parks Grid */}
       {filteredParks.length === 0 ? (
         <div className="text-center py-12">
-          <div className="text-6xl mb-4 opacity-50">🎢</div>
+          <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
           <h3 className="text-xl font-semibold mb-2">No parks found</h3>
           <p className="text-muted-foreground mb-4">
             Try adjusting your search terms or filters

src/components/parks/ParkListView.tsx

@@ -1,4 +1,4 @@
-import { MapPin, Star, Users, Calendar, ExternalLink } from 'lucide-react';
+import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -21,11 +21,11 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
 
   const getParkTypeIcon = (type: string) => {
     switch (type) {
-      case 'theme_park': return '🏰';
-      case 'amusement_park': return '🎢';
-      case 'water_park': return '🏊';
-      case 'family_entertainment': return '🎪';
-      default: return '🎡';
+      case 'theme_park': return <Castle className="w-5 h-5" />;
+      case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
+      case 'water_park': return <Waves className="w-5 h-5" />;
+      case 'family_entertainment': return <Tent className="w-5 h-5" />;
+      default: return <FerrisWheel className="w-5 h-5" />;
     }
   };
 
@@ -55,7 +55,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                   />
                 ) : (
                   <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center">
-                    <span className="text-3xl opacity-50">
+                    <span className="opacity-50">
                       {getParkTypeIcon(park.park_type)}
                     </span>
                   </div>
@@ -79,7 +79,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                         <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                           {park.name}
                         </h3>
-                        <span className="text-lg">{getParkTypeIcon(park.park_type)}</span>
+                        {getParkTypeIcon(park.park_type)}
                       </div>
                       
                       {park.location && (
@@ -132,7 +132,7 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                     </div>
                     <div className="flex items-center gap-1">
                       <span className="text-accent font-medium">{park.coaster_count || 0}</span>
-                      <span className="text-muted-foreground">🎢</span>
+                      <FerrisWheel className="w-3 h-3 text-muted-foreground" />
                     </div>
                     {park.review_count > 0 && (
                       <div className="flex items-center gap-1">