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 './ScienceContent';
import { PublicityContent } from './PublicityContent';
import { ExampleContent } from './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={200}
            />
        </div>
    );

}
export default PsychologyNav;