import { Activity, Bug, FilePenLine, LayoutDashboard, Mail, Settings, Users } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { __ } from "@wordpress/i18n";
interface Props {
  activeTab: string;
  onTabChange: (tab: string) => void;
  isPremium: boolean;
}
const TABS: {
  id: string;
  label: string;
  pro: boolean;
  icon: LucideIcon;
}[] = [{
  id: 'overview',
  label: __('Overview', 'stockbeacon-product-waitlists-for-woocommerce'),
  pro: false,
  icon: LayoutDashboard
}, {
  id: 'subscribers',
  label: __('Subscribers', 'stockbeacon-product-waitlists-for-woocommerce'),
  pro: false,
  icon: Users
}, {
  id: 'activity',
  label: __('Activity Log', 'stockbeacon-product-waitlists-for-woocommerce'),
  pro: false,
  icon: Activity
}, {
  id: 'form-editor',
  label: __('Form Editor', 'stockbeacon-product-waitlists-for-woocommerce'),
  pro: false,
  icon: FilePenLine
}, {
  id: 'email-editor',
  label: __('Email Editor', 'stockbeacon-product-waitlists-for-woocommerce'),
  pro: false,
  icon: Mail
}, {
  id: 'debug',
  label: __('Debug Tools', 'stockbeacon-product-waitlists-for-woocommerce'),
  pro: false,
  icon: Bug
}, ];
export function Header({
  activeTab,
  onTabChange,
  isPremium
}: Props) {
  const visibleTabs = isPremium ? TABS : TABS.filter(t => t.id !== 'settings');
  const tabButtons = visibleTabs.map(tab => {
    const Icon = tab.icon;
    return <button key={tab.id} type="button" className={`stockbeacon-tab-btn${activeTab === tab.id ? ' is-active' : ''}`} onClick={() => onTabChange(tab.id)}>
			<Icon size={16} strokeWidth={2.1} />
			{tab.label}
			{tab.pro && !isPremium && <span className="stockbeacon-pro-badge">{__("PRO", "stockbeacon-product-waitlists-for-woocommerce")}</span>}
		</button>;
  });
  return <>
			<div className="stockbeacon-header">
				<div className="stockbeacon-header__inner">
					<div className="stockbeacon-header__logo">
						<div className="stockbeacon-header__logo-icon">
							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
								<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
								<path d="M13.73 21a2 2 0 0 1-3.46 0" />
							</svg>
						</div>
						<span>{__("StockBeacon", "stockbeacon-product-waitlists-for-woocommerce")}</span>
					</div>
					<nav className="stockbeacon-header__nav" aria-label={__("Plugin sections", "stockbeacon-product-waitlists-for-woocommerce")}>
						{tabButtons}
					</nav>
				</div>
			</div>
			<div className="stockbeacon-mobile-nav">
				{tabButtons}
			</div>
		</>;
}
