import Heading from "../Heading";
import { useState, useContext } from "react";
import { motion } from "framer-motion";
import "./Home.css";
import { LoadingContext } from "../utils/LoadingContext";
import NavigationDots from "../utils/NavigationDots";

const About = ({ isVisible, aboutMe }) => {
  const [error, setError] = useState(null);
  const { isLoading } = useContext(LoadingContext);

  if (isLoading) return <div>Loading...</div>;

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { staggerChildren: 0.2 } },
  };

  const cardVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0 },
  };

  return (
    <div className="mx-auto relative z-2 p-10" id="about">
      <Heading
        title="More About Me!"
        highlightWords={[
          { word: "More", color: "text-green-600" },
          { word: "Ab", color: "text-green-600" },
          { word: "out", color: "text-red-600" },
          { word: "Me!", color: "text-red-600" },
        ]}
      />
      <NavigationDots currentSectionId="about" />

      {/* Animation container */}
      <motion.div
        initial="hidden"
        animate={isVisible ? "visible" : "hidden"}
        variants={containerVariants}
        className="flex flex-wrap gap-10 justify-center"
      >
        {aboutMe.map((item, index) => (
          <motion.div
            key={item.id}
            className="relative rounded-lg w-auto lg:w-1/3 2xl:w-1/4 sm:px-20 lg:px-0"
            variants={cardVariants}
            transition={{
              type: "spring",
              stiffness: 150,
              damping: 20,
            }}
          >
            {/* Inner Content */}
            <div className="relative bg-black/80 text-white p-4 lg:p-6 rounded-lg flex flex-col justify-between">
              <h5 className="text-center text-xl lg:text-2xl xl:text-3xl font-bold mb-4 text-orange-400">
                {item.title}
              </h5>

              {item.image && (
                <div className="mb-4">
                  <img
                    src={item.image}
                    alt={"image"}
                    className="w-full h-full object-cover rounded-md"
                  />
                </div>
              )}

              <p
                className="text-lg xl:text-xl text-white mt-auto"
                dangerouslySetInnerHTML={{ __html: item.description }}
              />
            </div>
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
};

export default About;