"use client";

import { resortData } from "@/src/data/resort";
import Link from "next/link";

export default function FloatingBookingBar() {
  // Normally would have state for dates, but following PRD's "minimal bar"
  const lang = "tr"; // Mocked locale

  return (
    <div className="fixed bottom-6 left-0 right-0 z-40 px-6 animate-fade-in-up">
      <div className="max-w-4xl mx-auto glass-dark text-white rounded-full p-2 flex items-center shadow-2xl">
        <div className="flex-1 flex items-center divide-x divide-white/10 px-4 overflow-x-auto no-scrollbar">
          {/* Check In */}
          <div className="px-4 py-2 flex flex-col min-w-[120px]">
            <span className="text-[10px] uppercase tracking-widest text-white/50">
              {resortData.floatingBar.checkIn[lang]}
            </span>
            <span className="text-sm font-semibold italic">Select Date</span>
          </div>
          
          {/* Check Out */}
          <div className="px-4 py-2 flex flex-col min-w-[120px]">
            <span className="text-[10px] uppercase tracking-widest text-white/50">
              {resortData.floatingBar.checkOut[lang]}
            </span>
            <span className="text-sm font-semibold italic">Select Date</span>
          </div>

          {/* Guests */}
          <div className="px-4 py-2 flex flex-col min-w-[100px]">
            <span className="text-[10px] uppercase tracking-widest text-white/50">
              {resortData.floatingBar.guests[lang]}
            </span>
            <span className="text-sm font-semibold">2 Adults</span>
          </div>
        </div>

        <Link
          href={resortData.bookingUrl}
          target="_blank"
          className="bg-gold text-white px-8 py-3 rounded-full font-bold text-sm hover:bg-gold-dark transition-all whitespace-nowrap"
        >
          {resortData.floatingBar.search[lang]}
        </Link>
      </div>
    </div>
  );
}