87 lines
3.2 KiB
TypeScript
87 lines
3.2 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { resortData } from "@/src/data/resort";
|
||
import { motion } from "framer-motion";
|
||
import { useRef } from "react";
|
||
|
||
interface AccommodationCardProps {
|
||
room: any;
|
||
lang: "tr";
|
||
}
|
||
|
||
const getCloudinaryUrl = (publicId: string, width = 1200) => {
|
||
if (!publicId) return "https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80&w=1200";
|
||
return `https://res.cloudinary.com/du7xohbct/image/upload/q_auto,f_auto,w_${width}/${publicId}`;
|
||
};
|
||
|
||
export default function AccommodationCard({ room, lang }: AccommodationCardProps) {
|
||
const allImages = [
|
||
room.mainImageId,
|
||
...(room.galleryImageIds || [])
|
||
];
|
||
|
||
const scrollRef = useRef<HTMLDivElement>(null);
|
||
|
||
return (
|
||
<div className="flex flex-col w-full bg-[#ECE7E1] mb-12 shadow-sm">
|
||
{/* Precision Header Section */}
|
||
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center px-10 py-12 gap-10">
|
||
|
||
{/* Left: Title & Descriptions */}
|
||
<div className="flex-[2] space-y-3">
|
||
<h3 className="text-[#4F5B3A] text-2xl font-serif tracking-tight leading-none mb-1">
|
||
{room.name[lang]} <span className="text-sm font-sans opacity-60">({room.size})</span>
|
||
</h3>
|
||
<p className="text-[13px] leading-relaxed text-[#4F5B3A] opacity-90 font-light max-w-2xl">
|
||
{room.description[lang]}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Right: Booking Button */}
|
||
<div className="flex-shrink-0 w-full lg:w-auto">
|
||
<Link
|
||
href={`/accommodation/${room.slug}`}
|
||
className="block w-full lg:w-auto bg-[#C87E4B] hover:bg-[#A6693E] text-black px-12 py-4 text-[11px] font-bold tracking-[0.2em] rounded-md transition-all duration-300 transform hover:-translate-y-1 shadow-xl hover:shadow-[#C87E4B]/20 text-center uppercase"
|
||
>
|
||
Odayı İncele
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* DRAGGABLE SLIDER */}
|
||
<div
|
||
style={{ height: '550px', position: 'relative', width: '100vw', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw' }}
|
||
className="overflow-hidden cursor-grab active:cursor-grabbing bg-zinc-200"
|
||
>
|
||
<motion.div
|
||
ref={scrollRef}
|
||
drag="x"
|
||
dragConstraints={{ right: 80, left: -((allImages.length - 1) * 720) }}
|
||
className="flex h-full gap-4 px-[15vw]"
|
||
>
|
||
{allImages.map((id, idx) => (
|
||
<div
|
||
key={`${id}-${idx}`}
|
||
style={{ height: '100%', position: 'relative', minWidth: '700px', flexShrink: 0 }}
|
||
className="rounded-sm overflow-hidden shadow-sm group"
|
||
>
|
||
<Image
|
||
src={getCloudinaryUrl(id, 1200)}
|
||
alt="Gallery"
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
sizes="(max-width: 1024px) 100vw, 80vw"
|
||
className="transition-transform duration-700 group-hover:scale-105 pointer-events-none"
|
||
draggable={false}
|
||
priority={idx < 2}
|
||
/>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|