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 / Navigation Simulation */}
      <div className="flex overflow-x-auto border-b border-gray-200">
        {tabs.map((tab) => (
          <div
            key={tab}
            onClick={() => handleTabClick(tab)}
            className={`px-4 py-2 text-sm font-medium whitespace-nowrap cursor-pointer transition-colors ${
              currentView === tab
                ? 'border-b-2'
                : 'text-gray-500 hover:text-gray-700'
            }`}
            style={currentView === tab ? { color: '#1b46c7', borderBottomColor: '#1b46c7' } : undefined}
          >
            {tab}
          </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>
  );
}