import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { cn } from '@/lib/utils';
import Link from 'next/link';
import type { PropsWithChildren } from 'react';

interface EllipsisDropdownProps extends PropsWithChildren {
  items: {
    label: string;
    href?: string;
  }[];
  className?: string;
}

/**
 * Renders a dropdown component for collapsed breadcrumb items.
 */
export function EllipsisDropdown({ items, className }: EllipsisDropdownProps) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="ghost"
          className={cn('h-auto px-2 py-0 font-normal', className)}
          aria-label="Toggle hidden breadcrumb items"
        >
          …
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-56 p-2">
        {items.map(({ label, href }) => (
          <Link
            key={label}
            href={href ?? ''}
            className={cn(
              'block rounded px-2 py-1 text-sm transition-colors hover:bg-accent hover:text-accent-foreground',
              className
            )}
          >
            {label}
          </Link>
        ))}
      </PopoverContent>
    </Popover>
  );
}