import React from 'react';
import { LabelsList } from './LabelsList';
import { LabelCategoriesView } from './LabelCategoriesView';
import { LabelTypesView } from './LabelTypesView';
import { LabelTemplatesView } from './LabelTemplatesView';
import { MultipleOptionsView } from './MultipleOptionsView';

type Tab = 'Labels' | 'Label Categories' | 'Label Types' | 'Label Templates' | 'Multiple Options';

interface LabelsViewProps {
  currentView?: string;
  onViewChange?: (view: string) => void;
}

export function LabelsView({ currentView = 'Labels', onViewChange }: LabelsViewProps) {
  const tabs: Tab[] = [
    'Labels',
    'Label Categories',
    'Label Types',
    'Label Templates',
    'Multiple Options'
  ];

  const handleTabClick = (tab: Tab) => {
    if (onViewChange) {
      onViewChange(tab);
    }
  };

  return (
    <div className="space-y-6">
      {/* Tabs - underline spans full width */}
      <div className="w-full border-b border-gray-200">
        <div className="flex overflow-x-auto bg-white">
          {tabs.map((tab) => (
          <div
            key={tab}
            onClick={() => handleTabClick(tab)}
            style={
              currentView === tab
                ? { borderBottomWidth: 2, borderBottomStyle: 'solid', borderBottomColor: '#2563eb' }
                : undefined
            }
            className={`px-4 py-2.5 text-sm font-medium whitespace-nowrap cursor-pointer transition-colors -mb-px ${
              currentView === tab
                ? 'text-blue-600'
                : 'border-b-2 border-b-transparent text-gray-600 hover:text-gray-800'
            }`}
          >
            {tab}
          </div>
          ))}
        </div>
      </div>

      {/* Content */}
      <div className="min-h-[400px]">
        {currentView === 'Labels' && <LabelsList />}
        {currentView === 'Label Categories' && <LabelCategoriesView />}
        {currentView === 'Label Types' && <LabelTypesView />}
        {currentView === 'Label Templates' && <LabelTemplatesView />}
        {currentView === 'Multiple Options' && <MultipleOptionsView />}
        {!['Labels', 'Label Categories', 'Label Types', 'Label Templates', 'Multiple Options'].includes(currentView) && (
          <div className="flex items-center justify-center h-64 text-gray-400">
            {currentView} content coming soon...
          </div>
        )}
      </div>
    </div>
  );
}
