staff_data/apps/web/src/app/main/home/components/HeroSection.tsx

import React, {
	useRef,
	useCallback,
	useEffect,
	useMemo,
	useState,
} from "react";
import { Carousel, Typography } from "antd";
import {
	TeamOutlined,
	BookOutlined,
	StarOutlined,
	LeftOutlined,
	RightOutlined,
	EyeOutlined,
} from "@ant-design/icons";
import type { CarouselRef } from "antd/es/carousel";
import { useAppConfig } from "@nice/client";

const { Title, Text } = Typography;

interface CarouselItem {
	title: string;
	desc: string;
	image: string;
	action: string;
	color: string;
}

interface PlatformStat {
	icon: React.ReactNode;
	value: number;
	label: string;
}

const HeroSection = () => {
	const carouselRef = useRef<CarouselRef>(null);
	const { statistics, slides } = useAppConfig();
	const [countStatistics, setCountStatistics] = useState<number>(4);
	const platformStats: PlatformStat[] = useMemo(() => {
		return [
			{
				icon: <TeamOutlined />,
				value: statistics.staffs,
				label: "注册学员",
			},
			{
				icon: <StarOutlined />,
				value: statistics.courses,
				label: "精品课程",
			},
			{
				icon: <BookOutlined />,
				value: statistics.lectures,
				label: "课程章节",
			},
			{
				icon: <EyeOutlined />,
				value: statistics.reads,
				label: "观看次数",
			},
		];
	}, [statistics]);
	const handlePrev = useCallback(() => {
		carouselRef.current?.prev();
	}, []);

	const handleNext = useCallback(() => {
		carouselRef.current?.next();
	}, []);

	const countNonZeroValues = (statistics: Record<string, number>): number => {
		return Object.values(statistics).filter((value) => value !== 0).length;
	};

	useEffect(() => {
		const count = countNonZeroValues(statistics);
		console.log(count);
		setCountStatistics(count);
	}, [statistics]);
	return (
		<section className="relative ">
			<div className="group">
				<Carousel
					ref={carouselRef}
					autoplay
					effect="fade"
					className="h-[600px] mb-24"
					dots={{
						className: "carousel-dots !bottom-32 !z-20",
					}}>
					{Array.isArray(slides) ? (
						slides.map((item, index) => (
							<div key={index} className="relative h-[600px]">
								<div
									className="absolute inset-0 bg-cover bg-center transform transition-[transform,filter] duration-[2000ms] group-hover:scale-105 group-hover:brightness-110 will-change-[transform,filter]"
									style={{
										//backgroundImage: `url(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
										backgroundImage: `url(${item})`,
										backfaceVisibility: "hidden",
									}}
								/>
								{/* <div
									className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`}
								/> */}
								<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />

								{/* Content Container */}
								<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
							</div>
						))
					) : (
						<div></div>
					)}
				</Carousel>

				{/* Navigation Buttons */}
				<button
					onClick={handlePrev}
					className="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 bg-black/20 hover:bg-black/30 w-12 h-12 flex items-center justify-center rounded-full transform hover:scale-110 hover:shadow-lg"
					aria-label="Previous slide">
					<LeftOutlined className="text-white text-xl" />
				</button>
				<button
					onClick={handleNext}
					className="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 bg-black/20 hover:bg-black/30 w-12 h-12 flex items-center justify-center rounded-full transform hover:scale-110 hover:shadow-lg"
					aria-label="Next slide">
					<RightOutlined className="text-white text-xl" />
				</button>
			</div>

			{/* Stats Container */}
			{countStatistics > 1 && (
				<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
					<div
						className={`rounded-2xl grid grid-cols-${countStatistics} lg:grid-cols-${countStatistics} md:grid-cols-${countStatistics} gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]`}>
						{platformStats.map((stat, index) => {
							return stat.value ? (
								<div
									key={index}
									className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out">
									<div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-primary-50 text-primary-600 text-3xl transition-colors duration-300 group-hover:text-primary-700">
										{stat.icon}
									</div>
									<div className="text-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-1.5">
										{stat.value}
									</div>
									<div className="text-gray-600 font-medium">
										{stat.label}
									</div>
								</div>
							) : null;
						})}
					</div>
				</div>
			)}
		</section>
	);
};

export default HeroSection;