"use client"

import { motion } from "framer-motion"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowLeft, MapPin, Camera } from "lucide-react"
import type { Destination, Attraction } from "@/lib/destinations-data"

interface AttractionHeroSectionProps {
  attraction: Attraction
  destination: Destination
}

export default function AttractionHeroSection({ attraction, destination }: AttractionHeroSectionProps) {
  return (
    <section className="relative h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <Image
          src={attraction.image || "/placeholder.svg"}
          alt={attraction.name}
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-black/50" />
      </div>

      {/* Back Button */}
      <div className="absolute top-8 left-8 z-20">
        <Link href={`/tours/${destination.slug}`}>
          <Button
            variant="outline"
            className="bg-white/10 backdrop-blur-sm border-white/20 text-white hover:bg-white/20"
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to {destination.name}
          </Button>
        </Link>
      </div>

      {/* Content */}
      <div className="relative z-10 text-center text-white px-4 sm:px-6 lg:px-8">
        <motion.div initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1 }}>
          <div className="flex items-center justify-center space-x-2 mb-4">
            <Camera className="h-6 w-6 text-yellow-400" />
            <span className="text-yellow-400 font-medium">Featured Attraction</span>
          </div>

          <h1 className="text-5xl md:text-7xl font-bold mb-6">{attraction.name}</h1>

          <div className="flex items-center justify-center space-x-2 mb-8">
            <MapPin className="h-5 w-5 text-gray-300" />
            <span className="text-xl text-gray-300">
              {destination.name}, {destination.location}
            </span>
          </div>

          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: 0.3 }}
            className="text-xl md:text-2xl max-w-3xl mx-auto leading-relaxed"
          >
            {attraction.description}
          </motion.p>
        </motion.div>
      </div>
    </section>
  )
}