// components/common/page-tabs.tsx

'use client';

import cn from '@/utils/class-names';
import { ElementType } from 'react';

interface Tab {
  label: string;
  value: string;
  icon?: ElementType;
}

interface PageTabsProps {
  tabs: Tab[];
  activeTab: string;
  onChange?: (value: string) => void;
}

export default function PageTabs({
  tabs,
  activeTab,
  onChange,
}: PageTabsProps) {
  return (
    <div className="border-b border-gray-200">
      <div className="flex items-center gap-8">
        {tabs.map((tab) => {
          const isActive = activeTab === tab.value;
          const Icon = tab.icon;
          return (
            <button
              key={tab.value}
              onClick={() => onChange?.(tab.value)}
              className={cn(
                'border-b-2 pb-3 text-sm font-medium transition-colors flex items-center gap-1',
                isActive
                  ? 'border-primary text-primary'
                  : 'border-transparent text-gray-500 hover:text-gray-900'
              )}
            >
              {Icon && <Icon size={18} />}
              {tab.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}