// Shared types and small components for Tab components
import type { ReactNode } from 'react';
import { Plus } from 'lucide-react';
import type { AppConfig } from './types';

/** 所有 Tab 组件共享的 props：完整 config + 顶层 update 回调 */
export interface TabProps {
  config: AppConfig;
  update: <K extends keyof AppConfig>(key: K, value: AppConfig[K]) => void;
}

/** 用于显示 toast 消息的回调（如切换失败提示） */
export interface ToastProps {
  setToast: (msg: string) => void;
}

/** 通用「添加 XXX」虚线按钮，统一各 Tab 样式 */
export function AddButton({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-dashed border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:border-[var(--accent-cyan)]/30 transition-colors text-sm w-full justify-center"
    >
      <Plus className="h-4 w-4" /> {label}
    </button>
  );
}

/** 简单错误/提示气泡，统一红色错误样式 */
export function ErrorBanner({ children }: { children: ReactNode }) {
  if (!children) return null;
  return (
    <div className="text-sm text-[rgb(242,90,90)] bg-[rgb(242,90,90)]/10 border border-[rgb(242,90,90)]/25 rounded-lg px-3 py-2">
      {children}
    </div>
  );
}