import { SkillSettings } from './SkillSettings';
import { ToolSettings } from './ToolSettings';

interface PluginLayoutProps {
  resourceTab: string;
  setResourceTab: (tab: string) => void;
}

export function PluginLayout({ resourceTab, setResourceTab }: PluginLayoutProps) {
  return (
    <div className="flex-1 flex flex-col bg-slate-50 overflow-hidden">
      {/* Top Tabs for Plugin Module */}
      <div className="h-14 border-b border-slate-200 bg-white flex items-center px-6 shadow-sm z-10 shrink-0 space-x-6">
        <button
          onClick={() => setResourceTab('skill')}
          className={`py-4 text-sm font-medium border-b-2 transition-colors ${
            resourceTab === 'skill' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800'
          }`}
        >
          Skills
        </button>
        <button
          onClick={() => setResourceTab('tool')}
          className={`py-4 text-sm font-medium border-b-2 transition-colors ${
            resourceTab === 'tool' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800'
          }`}
        >
          Tools
        </button>
      </div>

      {/* Main Content */}
      <div className="flex-1 overflow-y-auto p-8">
        {resourceTab === 'skill' && <SkillSettings />}
        {resourceTab === 'tool' && <ToolSettings />}
      </div>
    </div>
  );
}