import { useEffect, useState } from 'react'; import Header from '@/components/header/Header'; import TitleGallery from './TitleGallery'; import OverviewDetails from './OverviewDetails'; import PropertyBox from '@/components/property-box/PropertyBox'; import Footer from '@/components/footer/Footer'; import { Hotel } from '@/pages/search'; import { useRouter } from 'next/router'; import { get } from '@/api1/apiUtils'; import Head from 'next/head'; const Index = () => { const [hotelDetail, setHotelDetail] = useState(); const router = useRouter(); const { hotelId } = router.query; useEffect(() => { const fetchHotelDetail = async () => { if (!router.isReady || !hotelId) return; try { const res = await get(`/hotels/${hotelId}`) as any; setHotelDetail(res?.hotel); } catch (error) { console.error('Failed to fetch hotel:', error); } }; fetchHotelDetail(); }, [router.isReady, hotelId]); // Define SEO metadata const seo = { title: `${hotelDetail?.name} - Hotel Ayodhyas`, description: hotelDetail?.description || 'Default description if hotel detail is not available', keywords: 'hotel, travel, booking, vacations', ogImage: hotelDetail?.images || '/default-image.jpg' as any, ogType: 'website', ogUrl: `https://ayodhyas.com/hotels/${hotelId}`, }; return ( <> {seo.title} {/* Open Graph tags for social sharing */} {/* Twitter card */}