"use client"

import Link from "next/link"
import Image from "next/image"
import { useEffect, useState } from "react"

interface Post {
  slug: string
  title: string
  date: string
  excerpt?: string
}

export default function Navbar() {
  const [posts, setPosts] = useState<Post[]>([])

  useEffect(() => {
    fetch("/api/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data))
      .catch((err) => console.error("Error fetching posts:", err))
  }, [])

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-sm border-b border-red-600/20 font-mono">
      <div className="container max-w-screen px-8">
        <div className="flex items-center justify-between h-16">
          {/* Left side - Logo and title */}
          <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
            <div className="w-8 h-8 rounded-sm flex items-center justify-center">
              <Image className="rounded-sm" src="/cover.jpg" height={100} width={100} alt="DAMN. album cover"/>
            </div>
            <span className="text-red-600 font-bold text-xl tracking-wider">DAMN.</span>
          </Link>

          {/* Right side - Posts navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {posts.map((post) => (
              <Link
                key={post.slug}
                href={`/posts/${post.slug}`}
                className="text-gray-300 hover:text-red-400 transition-colors text-sm uppercase tracking-wide"
              >
                {post.title}
              </Link>
            ))}
          </div>

          {/* Mobile menu button */}
          {/*<button className="md:hidden text-white">*/}
          {/*  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">*/}
          {/*    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />*/}
          {/*  </svg>*/}
          {/*</button>*/}
        </div>
      </div>
    </nav>
  )
}