import React, { useState, useEffect, useRef } from ‘react’; import { motion, AnimatePresence } from ‘framer-motion’; import { Camera, Sparkles, Heart, Star, Circle, CheckCircle, AlertTriangle, Loader2, Tree, // Changed from ChristmasTree Sparkle, Rabbit, Sun, Gift, Flag, Users, Gamepad2, Music, BookOpen, Film, Compass, Github, Twitter, Linkedin, Mail, Phone, MapPin, Calendar, Clock } from ‘lucide-react’; import { Button } from ‘@/components/ui/button’; import { cn } from ‘@/lib/utils’; // Placeholder image URL (replace with your actual image) const headerImageUrl = ‘https://images.unsplash.com/photo-1577023311546-cdc07a840984?q=80&w=3174&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D’; // Holiday data with icons const holidayData = [ { id: ‘christmas’, name: ‘Christmas’, icon: Tree, // Changed to Tree colors: { bg: ‘bg-red-500’, text: ‘text-white’ }, }, { id: ‘new-year’, name: ‘New Year’, icon: Sparkle, colors: { bg: ‘bg-yellow-400’, text: ‘text-gray-800’ }, }, { id: ‘easter’, name: ‘Easter’, icon: Rabbit, colors: { bg: ‘bg-pink-300’, text: ‘text-gray-800’ }, }, { id: ‘summer’, name: ‘Summer’, icon: Sun, colors: { bg: ‘bg-green-400’, text: ‘text-white’ }, }, { id: ‘valentines’, name: ‘Valentine\’s’, icon: Gift, colors: { bg: ‘bg-rose-500’, text: ‘text-white’ }, }, { id: ‘independence’, name: ‘Independence’, icon: Flag, colors: { bg: ‘bg-blue-600’, text: ‘text-white’ }, }, ]; // Animation variants const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.3, }, }, }; const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, }, }; const PhotoRoomGallery = () => { const [selectedHoliday, setSelectedHoliday] = useState(null); const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); const containerRef = useRef(null); // Function to simulate loading and potential errors const fetchData = async () => { setIsLoading(true); setIsError(false); try { // Simulate an API call delay await new Promise((resolve) => setTimeout(resolve, 1500)); // Simulate a 20% chance of error if (Math.random() < 0.2) { throw new Error('Failed to fetch data'); } // Data fetching logic here (replace with actual data) } catch (error) { setIsError(true); } finally { setIsLoading(false); } }; useEffect(() => { fetchData(); }, []); // Get the selected holiday’s colors const selectedHolidayColors = selectedHoliday ? holidayData.find((holiday) => holiday.id === selectedHoliday)?.colors || { bg: ‘bg-gray-700’, text: ‘text-white’, } : { bg: ‘bg-gray-700’, text: ‘text-white’ }; return (

{/* Header Section */}

Our Photo Room Gallery

Our special place for photoshoots of your pets during their visit.

{/* Holiday Selection Section */}

Explore our galleries by holiday

{holidayData.map((holiday) => { const Icon = holiday.icon; return (

setSelectedHoliday(holiday.id)} className={cn( ‘w-16 h-16 sm:w-20 sm:h-20 rounded-full transition-all duration-300’, ‘border-2 border-gray-700’, selectedHoliday === holiday.id ? `ring-4 ring-offset-2 ${holiday.colors.bg} ring-opacity-70` : ‘hover:scale-110 hover:border-gray-600’, ‘flex items-center justify-center’ )} aria-label={holiday.name} // Add aria-label for accessibility > {holiday.name}

); })}

{/* Gallery Section */}

{selectedHoliday ? `${holidayData.find((h) => h.id === selectedHoliday)?.name} Gallery` : ‘All Galleries’}

{isLoading && (

Loading…

)} {isError && (

Error: Failed to load gallery. Please try again later.

)} {!isLoading && !isError && ( {/* Placeholder gallery items */} {[…Array(9)].map((_, index) => (

))} )}

); }; export default PhotoRoomGallery;