"use client";

import { usePathname, useRouter } from 'next/navigation';
import { Button } from '../src/components/ui/button';
import Image from 'next/image';

const examples = [
  { name: "Chat", href: "/chat" },
  { name: "Dashboard", href: "/dashboard" },
  { name: "Mail", href: "/mail" },
  { name: "Tree", href: "/tree" },
  { name: "Editor", href: "/editor" },
  { name: "Tables", href: "/table" },
  { name: "Meet", href: "/meet" },
  { name: "Videos", href: "/videos" },
  { name: "Music", href: "/music" },
  { name: "Templates", href: "/templates" },
  { name: "Settings", href: "/settings" },
];

export function Nav() {
  const pathname = usePathname();
  const router = useRouter();

  return (
    <div className="examples-nav-container">
      <div className="examples-nav-inner" style={{ display: 'flex', alignItems: 'center' }}>
        <Image
          src={"/images/generalbots-logo.svg"}
          alt="Logo"
          width={92}
          height={56}
          className="logo"
          style={{ marginLeft: '10px' , marginRight: '10px' , marginTop: '3px'}} // Add some spacing between logo and buttons
        />
        <div style={{ display: 'flex' }}>
          {examples.map((example) => (
            <Button
              key={example.href}
              onClick={() => router.push(example.href)}
              className={`example-button ${pathname === example.href ? 'active' : ''}`}
            >
              {example.name}
            </Button>
          ))}
        </div>
      </div>
    </div>
  );
}