import { Tabs } from "antd";
import {
  VideoCameraOutlined,
  FileTextOutlined,
  CustomerServiceOutlined,
  ReadOutlined,
  BookOutlined,
} from "@ant-design/icons";
import { VideoContent } from "./VideoContent";
import { MusicContent } from "./MusicContent";
import { ScienceContent } from "./science/ScienceContent";
import { PublicityContent } from "./news/PublicityContent";
import { ExampleContent } from "./example/ExampleContent";
import "./pt.css";

export function PsychologyNav() {
  const items = [
    {
      key: "publicity",
      label: (
        <span className="flex items-center gap-2 text-gray-700 hover:text-primary transition-colors">
          <BookOutlined className="text-lg" />
          <span>宣传报道</span>
        </span>
      ),
      children: <PublicityContent />,
    },
    {
      key: "science",
      label: (
        <span className="flex items-center gap-2 text-gray-700 hover:text-primary transition-colors">
          <ReadOutlined className="text-lg" />
          <span>常识科普</span>
        </span>
      ),
      children: <ScienceContent />,
    },
    {
      key: "example",
      label: (
        <span className="flex items-center gap-2 text-gray-700 hover:text-primary transition-colors">
          <VideoCameraOutlined className="text-lg" />
          <span>案例分析</span>
        </span>
      ),
      children: <ExampleContent />,
    },
    {
      key: "video",
      label: (
        <span className="flex items-center gap-2 text-gray-700 hover:text-primary transition-colors">
          <FileTextOutlined className="text-lg" />
          <span>文件共享</span>
        </span>
      ),
      children: <VideoContent />,
    },
    // {
    //     key: 'music',
    //     label: (
    //         <span className="flex items-center gap-2 text-gray-700 hover:text-primary transition-colors">
    //             <CustomerServiceOutlined className="text-lg" />
    //             <span>音视频</span>
    //         </span>
    //     ),
    //     children: <MusicContent />
    // },
  ];
  return (
    <div className="w-full from bg-white  rounded-lg shadow-md">
      <Tabs
        defaultActiveKey="publicity"
        items={items}
        className="psychology-tabs"
        tabBarStyle={{
          margin: 0,
          padding: "12px 16px 0",
          borderBottom: "1px solid #f0f0f0",
        }}
        tabBarGutter={300}
      />
    </div>
  );
}
export default PsychologyNav;