"use client";
import { Home, MessagesSquare, Music, Image as ImageIcon, Map, Calendar } from "lucide-react";
import { motion } from "framer-motion";
import { useState } from "react";

export function GlassDock() {
  const [hovered, setHovered] = useState<number | null>(null);

  const icons = [Home, MessagesSquare, Music, ImageIcon, Map, Calendar];

  return (
    <div className="flex items-center justify-center w-full h-80 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center rounded-xl border border-border relative overflow-hidden">
      <div className="absolute bottom-8 flex items-end justify-center px-4 py-3 rounded-3xl bg-white/10 backdrop-blur-xl border border-white/20 shadow-[0_8px_32px_rgba(0,0,0,0.3)] gap-3">
        {icons.map((Icon, i) => (
          <motion.div
            key={i}
            onHoverStart={() => setHovered(i)}
            onHoverEnd={() => setHovered(null)}
            animate={{
              y: hovered === i ? -10 : 0,
              scale: hovered === i ? 1.2 : hovered === i - 1 || hovered === i + 1 ? 1.1 : 1,
            }}
            className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center cursor-pointer shadow-lg border border-white/10 backdrop-blur-md"
          >
            <Icon className="w-6 h-6 text-white" />
          </motion.div>
        ))}
      </div>
    </div>
  );
}