/**
 * ElementSettingsTabs
 *
 * Tab navigation for element settings.
 * Provides General Settings and CSS Styles tabs.
 */

import React from 'react';
import type { ElementSettingsTabsProps } from './types';

const ElementSettingsTabs: React.FC<ElementSettingsTabsProps> = ({
  activeTab,
  onTabChange,
  tabs,
}) => {
  return (
    <div className='mb-4 inline-flex overflow-hidden rounded border border-gray-300 dark:border-dark-700'>
      {tabs.map((tab) => (
        <button
          key={tab.id}
          type='button'
          className={`px-4 py-2 text-sm font-medium transition-colors ${
            activeTab === tab.id
              ? 'bg-blue-600 text-white'
              : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-dark-800 dark:text-gray-200 dark:hover:bg-dark-700'
          }`}
          onClick={() => onTabChange(tab.id)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
};

/**
 * Compact version for constructor sidebar
 */
export const ElementSettingsTabsCompact: React.FC<ElementSettingsTabsProps> = ({
  activeTab,
  onTabChange,
  tabs,
}) => {
  return (
    <div className='mb-3 inline-flex w-full overflow-hidden rounded border border-gray-300'>
      {tabs.map((tab) => (
        <button
          key={tab.id}
          type='button'
          className={`flex-1 px-2 py-1.5 text-[11px] font-semibold transition-colors ${
            activeTab === tab.id
              ? 'bg-blue-600 text-white'
              : 'bg-white text-gray-700 hover:bg-gray-50'
          }`}
          onClick={() => onTabChange(tab.id)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
};

export default ElementSettingsTabs;