"use client"

import { useState } from 'react'
import { Calendar, MessageSquare, BotIcon as Robot, PenTool, Bell } from 'lucide-react'
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import Image from 'next/image'
import Link from 'next/link'
import { Sidebar } from './sidebar'

export function MainNav() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false)

  return (
    <>
      <div className="flex items-center justify-between p-4 bg-black">
        <div className="flex items-center space-x-4">
          <button 
            className="text-white/80 hover:text-white"
            onClick={() => setIsSidebarOpen(true)}
          >
            <span className="sr-only">Toggle menu</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <line x1="3" y1="12" x2="21" y2="12"></line>
              <line x1="3" y1="6" x2="21" y2="6"></line>
              <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
          </button>
          <Link href="/">
            <Image 
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/enkun-4TNAp6sm9vEQNPg8XpLlizNyWW3jPD.svg"
              alt="Logo"
              width={32}
              height={32}
              className="text-white"
            />
          </Link>
          <Link href="/calendar" className="text-white/80 hover:text-white">
            <Calendar className="w-6 h-6" />
          </Link>
          <Link href="/messages" className="text-white/80 hover:text-white">
            <MessageSquare className="w-6 h-6" />
          </Link>
          <Link href="/ai-assistant" className="text-white/80 hover:text-white">
            <Robot className="w-6 h-6" />
          </Link>
          <Link href="/design" className="text-white/80 hover:text-white">
            <PenTool className="w-6 h-6" />
          </Link>
          <Link href="/notifications" className="text-white/80 hover:text-white">
            <Bell className="w-6 h-6" />
          </Link>
        </div>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Avatar>
              <AvatarImage src="/placeholder.svg" />
              <AvatarFallback>U</AvatarFallback>
            </Avatar>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem>
              <a href="/signin">Sign In</a>
            </DropdownMenuItem>
            <DropdownMenuItem>
              <a href="/signup">Sign Up</a>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      <Sidebar 
        isOpen={isSidebarOpen} 
        onClose={() => setIsSidebarOpen(false)} 
      />
    </>
  )
}