"use client";

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

const examples = [
  { name: "Home", href: "/authentication" },
  { name: "Dashboard", href: "/dashboard" },
  { name: "Chat", href: "/chat" },
  { name: "Mail", href: "/mail" },
  { name: "Drive", href: "/drive" },
  { name: "Tasks", href: "/tasks" },
  { name: "Templates", href: "/templates" },
  { name: "Settings", href: "/sync" },
];

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

  return (
    <div className="examples-nav-container">
      <div className="examples-nav-inner">
        {examples.map((example) => (
          <Button
            key={example.href}
            onClick={() => router.push(example.href)}
            className={`example-button ${pathname === example.href ? 'active' : ''}`}
          >
            {example.name}
          </Button>
        ))}
      </div>
    </div>
  );
}