"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { Menu, X } from "lucide-react"
import { cn } from "@/lib/utils"
import { BlueskyIcon } from "@/components/bluesky-icon"
import { LinkedInIcon } from "@/components/linkedin-icon"

interface SidebarProps {
  activeSection: string
}

export default function Sidebar({ activeSection }: SidebarProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  const toggleSidebar = () => {
    setIsOpen(!isOpen)
  }

  const scrollToSection = (sectionId: string) => {
    setIsOpen(false)
    document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth" })
  }

  const navItems = [
    { id: "home", label: "Home" },
    { id: "about", label: "About Me" },
    { id: "services", label: "What I Do" },
    { id: "resume", label: "Resume" },
    { id: "portfolio", label: "Portfolio" },
    { id: "testimonial", label: "Testimonial" },
    { id: "contact", label: "Contact" },
  ]

  return (
    <>
      {/* Mobile menu button */}
      <button
        className="md:hidden fixed top-4 right-4 z-50 p-2 rounded-full bg-purple-500/80 text-white backdrop-blur-sm cute-shadow"
        onClick={toggleSidebar}
        aria-label="Toggle menu"
      >
        {isOpen ? <X size={24} /> : <Menu size={24} />}
      </button>

      {/* Sidebar */}
      <aside
        className={cn(
          "fixed top-0 left-0 h-full w-[240px] bg-gradient-to-b from-purple-800 to-purple-900 text-white z-40 transition-transform duration-300 flex flex-col glossy",
          isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0",
        )}
      >
        <div className="flex flex-col items-center py-8">
          <div className="relative w-24 h-24 rounded-full overflow-hidden border-4 border-purple-300 mb-4 animate-float shadow-[0_0_20px_rgba(168,85,247,0.6)]">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pfpreal2-2W81lS3kpVL16QCzBFDVAddbAdKs96.png"
              alt="Amelia Petrie"
              fill
              className="object-cover"
              priority
            />
          </div>
          <h1 className="text-xl font-bold animate-fade-in text-white">Amelia Petrie</h1>
        </div>

        <nav className="flex-1 mt-8">
          <ul className="space-y-1 px-4">
            {navItems.map((item, index) => (
              <li
                key={item.id}
                className={mounted ? "animate-fade-in" : "opacity-0"}
                style={{ animationDelay: `${index * 0.1}s` }}
              >
                <button
                  onClick={() => scrollToSection(item.id)}
                  className={cn(
                    "w-full text-left py-2 px-4 rounded-full transition-colors",
                    activeSection === item.id
                      ? "text-white bg-purple-500/50 shadow-[0_0_10px_rgba(168,85,247,0.5)]"
                      : "text-purple-200 hover:text-white hover:bg-purple-500/30",
                  )}
                >
                  {item.label}
                </button>
              </li>
            ))}
          </ul>
        </nav>

        <div className="py-6 px-4 border-t border-purple-700/50">
          <div className="flex justify-center space-x-4">
            <a
              href="https://web-cdn.bsky.app/profile/cyndergate.bsky.social"
              target="_blank"
              rel="noopener noreferrer"
              className="text-purple-200 hover:text-white transition-colors"
              aria-label="Bluesky"
            >
              <BlueskyIcon />
            </a>
            <a
              href="https://linkedin.com/in/amelia-petrie-184503349"
              target="_blank"
              rel="noopener noreferrer"
              className="text-purple-200 hover:text-white transition-colors"
              aria-label="LinkedIn"
            >
              <LinkedInIcon />
            </a>
          </div>
        </div>
      </aside>
    </>
  )
}