import { useNavigate } from "react-router-dom";
import { Typography } from "antd";
export default function CategorySectionCard({handleMouseClick, index,handleMouseEnter,handleMouseLeave,category,categoryColor,isHovered,}) {
    const navigate = useNavigate()
    const { Title, Text } = Typography;
    return (
        <div
            key={index}
            className="group relative min-h-[130px] rounded-2xl transition-all duration-700 ease-out cursor-pointer will-change-transform hover:-translate-y-2"
            onMouseEnter={() => handleMouseEnter(index)}
            onMouseLeave={handleMouseLeave}
            role="button"
            tabIndex={0}
            aria-label={`查看${category.name}课程类别`}
            onClick={()=>{
                handleMouseClick(category.id)
            }}
        >
            <div className="absolute -inset-0.5 bg-gradient-to-r from-gray-200 to-gray-300 opacity-50 rounded-2xl transition-all duration-700 group-hover:opacity-75" />
            <div
                className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-white to-gray-50 shadow-lg transition-all duration-700 ease-out ${isHovered
                        ? "scale-[1.02] bg-opacity-95"
                        : "scale-100 bg-opacity-90"
                    }`}
            />
            <div
                className={`absolute inset-0 rounded-2xl transition-all duration-700 ease-out ${isHovered
                        ? "shadow-[0_8px_30px_rgb(0,0,0,0.12)]"
                        : "shadow-none opacity-0"
                    }`}
            />
            <div
                className={`absolute w-1/2 top-0 left-1/2 -translate-x-1/2 h-1 rounded-full transition-all duration-500 ease-out `}
                style={{
                    backgroundColor: categoryColor,
                }}
            />
            <div className="relative w-full h-full p-6">
                <div className="flex w-2/3 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex-col space-y-4 mb-4">
                    <Text
                        strong
                        className="text-xl font-medium tracking-wide">
                        {category.name}
                    </Text>
                </div>
                <div
                    className={` mt-6 absolute bottom-4 right-6 text-sm font-medium flex items-center space-x-2 transition-all duration-500 ease-out `}
                    style={{ color: categoryColor }}>
                    <span>了解更多</span>
                    <span
                        className={`transform transition-all duration-500 ease-out `}>
                        →
                    </span>
                </div>
            </div>
        </div>
    )
}