import React from 'react';
import { useTheme, useApp } from '../../contexts';

const tabs = [
  { id: 'docs', label: '文档管理' },
  { id: 'compliance', label: '合规分析' },
  { id: 'status', label: '系统状态' },
  { id: 'rag', label: '法规对话' },
];

export const Tabs: React.FC = () => {
  const { theme } = useTheme();
  const { activeTab, setActiveTab } = useApp();

  return (
    <nav
      className="h-[56px] flex items-center"
      style={{
        padding: '0 48px',
        borderBottom: `1px solid ${theme.border}`,
        backgroundColor: theme.bg,
      }}
    >
      {tabs.map((tab) => (
        <button
          key={tab.id}
          onClick={() => setActiveTab(tab.id as any)}
          style={{
            height: 56,
            padding: '0 32px',
            fontSize: 15,
            fontWeight: activeTab === tab.id ? 600 : 400,
            color: activeTab === tab.id ? theme.accent : theme.text3,
            background: 'transparent',
            border: 'none',
            borderBottom: activeTab === tab.id ? `3px solid ${theme.accent}` : '3px solid transparent',
            marginBottom: -1,
            cursor: 'pointer',
            transition: 'all 0.2s ease',
          }}
        >
          {tab.label}
        </button>
      ))}
    </nav>
  );
};