'use client'
import React from 'react';
import {Carousel, Tabs, TabsProps} from "antd";
import Image from "next/image";

function Honor({honorList}: {honorList: HonorInfo[]}) {
  const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
  function CategoryCarousel({ images }: { images: Array<{ id: string; url: string;}> }) {
    // 将图片按每页3个分组
    const imageGroups = []
    for (let i = 0; i < images.length; i += 3) {
      imageGroups.push(images.slice(i, i + 3))
    }

    return (
      <div className="relative">
        <Carousel arrows dots={true} infinite={false}>
          {imageGroups.map((group, groupIndex) => (
            <div key={groupIndex}>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 p-4">
                {group.map((image) => (
                  <div key={image.id} className="relative group">
                    <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                      <Image
                        src={ BASE_URL + image.url || "/placeholder.svg"}
                        alt={"证书"}
                        width={400}
                        height={300}
                        className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                      <div className="p-4">
                        <p className="text-sm text-gray-600 text-center">证书</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </Carousel>
      </div>
    )
  }

  const tabItems: TabsProps["items"] = honorList.map((honor,index) => ({
    key: honor.id || index.toString(),
    label: honor.certificateType || "未知",
    children: <CategoryCarousel images={honor.fileList || []} />,
  }))
  return (
    <>
      <Tabs defaultActiveKey="honor" items={tabItems} className="w-full" centered/>
    </>
  );
}

export default Honor;