/**
 * ToolbarOverflowMenu Component
 *
 * 工具栏溢出菜单，用于在空间不足时收纳次要按钮
 */

import { Settings, type LucideIcon } from 'lucide-react';
import { motion } from 'framer-motion';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '../primitives/DropdownMenu';
import { cn } from '../utils/cn';

export interface ToolbarMenuItem {
  /** 菜单项图标 */
  icon: LucideIcon;
  /** 菜单项标签 */
  label: string;
  /** 点击回调 */
  onClick?: () => void;
}

interface ToolbarOverflowMenuProps {
  /** 菜单项列表 */
  items: ToolbarMenuItem[];
  /** 自定义类名 */
  className?: string;
}

export function ToolbarOverflowMenu({ items, className }: ToolbarOverflowMenuProps) {
  // 过滤掉没有 onClick 的项
  const validItems = items.filter((item) => item.onClick);

  if (validItems.length === 0) {
    return null;
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <motion.button
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
          className={cn(
            'p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors',
            className
          )}
          title="Settings"
        >
          <Settings size={20} />
        </motion.button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {validItems.map((item) => (
          <DropdownMenuItem key={item.label} onClick={item.onClick}>
            <item.icon size={16} className="text-fg-muted" />
            <span>{item.label}</span>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}