import { useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";

const XZCustomMultiPostsWidget = () => {
  const [activeTab, setActiveTab] = useState(0);
  
  // Mock data for tabs - matches WordPress widget structure
  const tabs = [
    {
      title: "热门文章",
      articles: [
        { id: 1, title: "西装搭配技巧全解析", image: "https://placehold.co/400x250?text=西装搭配", views: 1245 },
        { id: 2, title: "职场着装礼仪指南", image: "https://placehold.co/400x250?text=职场礼仪", views: 987 },
        { id: 3, title: "男士正装选购要点", image: "https://placehold.co/400x250?text=正装选购", views: 876 },
        { id: 4, title: "女士商务套装搭配", image: "https://placehold.co/400x250?text=商务套装", views: 765 },
        { id: 5, title: "面料知识入门", image: "https://placehold.co/400x250?text=面料知识", views: 654 },
        { id: 6, title: "定制西装的注意事项", image: "https://placehold.co/400x250?text=定制西装", views: 543 }
      ],
      adContent: "<div style='background:#f5f5f5;height:300px;display:flex;align-items:center;justify-content:center'>广告区域</div>"
    },
    {
      title: "最新资讯",
      articles: [
        { id: 7, title: "2023秋冬时装周回顾", image: "https://placehold.co/400x250?text=时装周", views: 1123 },
        { id: 8, title: "可持续时尚趋势", image: "https://placehold.co/400x250?text=可持续时尚", views: 987 },
        { id: 9, title: "智能面料技术进展", image: "https://placehold.co/400x250?text=智能面料", views: 876 },
        { id: 10, title: "国内品牌国际化", image: "https://placehold.co/400x250?text=品牌国际化", views: 765 },
        { id: 11, title: "时尚行业就业前景", image: "https://placehold.co/400x250?text=就业前景", views: 654 },
        { id: 12, title: "跨界合作新案例", image: "https://placehold.co/400x250?text=跨界合作", views: 543 }
      ],
      adContent: "<div style='background:#e8f4fc;height:300px;display:flex;align-items:center;justify-content:center'>广告区域2</div>"
    },
    {
      title: "专题推荐",
      articles: [
        { id: 13, title: "商务会议着装指南", image: "https://placehold.co/400x250?text=会议着装", views: 1023 },
        { id: 14, title: "面试着装注意事项", image: "https://placehold.co/400x250?text=面试着装", views: 921 },
        { id: 15, title: "高端定制体验分享", image: "https://placehold.co/400x250?text=定制体验", views: 876 },
        { id: 16, title: "面料保养技巧", image: "https://placehold.co/400x250?text=面料保养", views: 765 },
        { id: 17, title: "职场形象管理", image: "https://placehold.co/400x250?text=形象管理", views: 654 },
        { id: 18, title: "国际品牌对比", image: "https://placehold.co/400x250?text=品牌对比", views: 543 }
      ],
      adContent: "<div style='background:#f9e8e8;height:300px;display:flex;align-items:center;justify-content:center'>广告区域3</div>"
    }
  ];

  const handlePrev = () => {
    const container = document.querySelector(`.xz-custom-swiper-wrapper-${activeTab}`);
    if (container) {
      container.scrollBy({ left: -300, behavior: 'smooth' });
    }
  };

  const handleNext = () => {
    const container = document.querySelector(`.xz-custom-swiper-wrapper-${activeTab}`);
    if (container) {
      container.scrollBy({ left: 300, behavior: 'smooth' });
    }
  };

  return (
    <div className="xz-custom-theme-box bg-white rounded-md p-3.5 shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
      <div className="xz-custom-index-tab mb-5 bg-[#34495E] py-1">
        <ul className="flex overflow-x-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 bg-white rounded-md px-2 py-1">
          {tabs.map((tab, index) => (
            <li 
              key={index} 
              className={`px-3.5 py-1.5 cursor-pointer rounded-md transition-all ${activeTab === index ? 'bg-[#34495E] text-white font-medium' : 'text-gray-700 hover:bg-gray-100'}`}
              onClick={() => setActiveTab(index)}
            >
              {tab.title}
            </li>
          ))}
        </ul>
      </div>
      
      <div className="xz-custom-tab-content">
        {tabs.map((tab, index) => (
          <div key={index} className={`xz-custom-tab-pane ${activeTab === index ? 'block' : 'hidden'}`}>
            <div className="xz-custom-posts-layout flex flex-wrap w-full">
              {/* 广告区域 */}
              <div className="xz-custom-posts-ad pr-1.5 w-1/5 lg:w-1/5 md:w-1/5 sm:w-full">
                <div 
                  className="xz-custom-ad-container min-h-[300px] border-r border-gray-200 pr-1.5 relative"
                  dangerouslySetInnerHTML={{ __html: tab.adContent }}
                />
              </div>
              
              {/* 内容区域 */}
              <div className="xz-custom-posts-content pl-1.5 w-4/5 lg:w-4/5 md:w-4/5 sm:w-full">
                <div className="xz-custom-swiper-container w-full">
                  <div className={`xz-custom-swiper-wrapper-${index} flex overflow-x-auto pb-2`}>
                    {tab.articles.map((article) => (
                      <div key={article.id} className="xz-custom-posts-item flex-none w-[250px] bg-white rounded-md overflow-hidden shadow-[0_2px_5px_rgba(0,0,0,0.05)] hover:shadow-[0_5px_15px_rgba(0,0,0,0.1)] transition-all duration-300 mr-3.5 last:mr-0">
                        <div className="h-[160px] overflow-hidden">
                          <img src={article.image} alt={article.title} className="w-full h-full object-cover" />
                        </div>
                        <div className="p-3">
                          <h3 className="text-sm font-medium text-gray-800 mb-2 line-clamp-2 h-10">{article.title}</h3>
                          <div className="flex items-center text-xs text-gray-500">
                            <span className="mr-2">浏览 {article.views}</span>
                            <span>·</span>
                            <a href="#" className="ml-2 text-blue-600 hover:underline">阅读</a>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                  
                  {/* 导航按钮 */}
                  <div className="flex justify-end mt-2">
                    <button 
                      onClick={handlePrev}
                      className="p-1.5 bg-gray-100 rounded-l-md hover:bg-gray-200 transition-colors"
                    >
                      <ChevronLeft className="w-4 h-4" />
                    </button>
                    <button 
                      onClick={handleNext}
                      className="p-1.5 bg-gray-100 rounded-r-md hover:bg-gray-200 transition-colors ml-0.5"
                    >
                      <ChevronRight className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default XZCustomMultiPostsWidget;<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /www/wwwroot/www.ssgzf.cn/wp-content/themes/zibll/func.php:1) in <b>/www/wwwroot/www.ssgzf.cn/wp-includes/sitemaps/class-wp-sitemaps-renderer.php</b> on line <b>126</b><br />
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://www.ssgzf.cn/wp-sitemap-index.xsl" ?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://www.ssgzf.cn/wp-sitemap-posts-post-1.xml</loc></sitemap><sitemap><loc>https://www.ssgzf.cn/wp-sitemap-posts-page-1.xml</loc></sitemap><sitemap><loc>https://www.ssgzf.cn/wp-sitemap-taxonomies-category-1.xml</loc></sitemap><sitemap><loc>https://www.ssgzf.cn/wp-sitemap-taxonomies-post_tag-1.xml</loc></sitemap><sitemap><loc>https://www.ssgzf.cn/wp-sitemap-users-1.xml</loc></sitemap></sitemapindex>