News-reader-pro/components/FeatureToolbar.tsx

import React from 'react';
import {
  BarChart3,
  Rss,
  Bookmark,
  Download,
  Zap,
  FileText
} from 'lucide-react';

interface FeatureToolbarProps {
  onOpenStats: () => void;
  onOpenRSS: () => void;
  onOpenBookmarks: () => void;
  onExportAudio: () => void;
  smartSpeedEnabled: boolean;
  onToggleSmartSpeed: () => void;
  hasBookmark?: boolean;
  canExport?: boolean;
  isExporting?: boolean;
}

export const FeatureToolbar: React.FC<FeatureToolbarProps> = ({
  onOpenStats,
  onOpenRSS,
  onOpenBookmarks,
  onExportAudio,
  smartSpeedEnabled,
  onToggleSmartSpeed,
  hasBookmark,
  canExport,
  isExporting
}) => {
  const buttons = [
    {
      icon: BarChart3,
      label: 'Stats',
      onClick: onOpenStats,
      color: 'text-blue-500',
      bgColor: 'bg-blue-50 dark:bg-blue-900/30'
    },
    {
      icon: Rss,
      label: 'RSS Feeds',
      onClick: onOpenRSS,
      color: 'text-orange-500',
      bgColor: 'bg-orange-50 dark:bg-orange-900/30'
    },
    {
      icon: Bookmark,
      label: 'Bookmarks',
      onClick: onOpenBookmarks,
      color: hasBookmark ? 'text-yellow-500' : 'text-slate-500',
      bgColor: hasBookmark ? 'bg-yellow-50 dark:bg-yellow-900/30' : 'bg-slate-50 dark:bg-slate-800'
    },
    {
      icon: Download,
      label: isExporting ? 'Exporting...' : 'Export',
      onClick: onExportAudio,
      color: 'text-green-500',
      bgColor: 'bg-green-50 dark:bg-green-900/30',
      disabled: !canExport || isExporting
    },
    {
      icon: Zap,
      label: 'Smart Speed',
      onClick: onToggleSmartSpeed,
      color: smartSpeedEnabled ? 'text-purple-500' : 'text-slate-400',
      bgColor: smartSpeedEnabled ? 'bg-purple-50 dark:bg-purple-900/30' : 'bg-slate-50 dark:bg-slate-800',
      active: smartSpeedEnabled
    }
  ];

  return (
    <div className="flex items-center gap-2 overflow-x-auto pb-2">
      {buttons.map((btn, i) => (
        <button
          key={i}
          onClick={btn.onClick}
          disabled={btn.disabled}
          className={`
            flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium transition-all whitespace-nowrap
            ${btn.bgColor} ${btn.color}
            ${btn.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-md active:scale-95'}
            ${btn.active ? 'ring-2 ring-purple-500 ring-offset-1' : ''}
          `}
        >
          <btn.icon className="w-4 h-4" />
          <span className="hidden sm:inline">{btn.label}</span>
        </button>
      ))}
    </div>
  );
};