'use client';

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { ChevronDown } from 'lucide-react';

export default function MonthNav({ months }: { months: string[] }) {
  if (months.length === 0) {
    return null;
  }

  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
    e.preventDefault();
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <div className="sticky top-0 z-10 py-4 bg-background/80 backdrop-blur-sm -mx-4 px-4 mb-8 flex justify-center">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" className="font-body text-lg">
            Índice de Meses
            <ChevronDown className="ml-2 h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="font-body">
          {months.map((month) => {
            const [monthName, year] = month.split(' ');
            const id = `${monthName?.toLowerCase()}-${year}`;
            return (
              <DropdownMenuItem key={id} asChild>
                <a href={`#${id}`} onClick={(e) => handleLinkClick(e, id)} className="cursor-pointer">
                  {month}
                </a>
              </DropdownMenuItem>
            );
          })}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}