"use client";

import { useContext } from "react";
import Image from "next/image";
import { motion } from "framer-motion";
import ProductContext from "@/app/contexts/productContext";
import { Button } from "@/components/ui/button";
import { backendUrl } from "@/utils/axios";

const cleanHTML = (html) => {
  if (!html) return "";
  return html.replace(/style="[^"]*color:[^;]*;?"/gi, "");
};

const CategoryHero = ({ params }) => {
  const { category } = useContext(ProductContext);
  const selectedCategory = category?.find((cat) => cat.id == params.id);

  console.log(selectedCategory);

  // Fallback values
  const fallbackImage = "/placeholder-image.jpg";
  const fallbackDescription =
    "Explore our curated collection of spiritual items designed to enhance your journey of self-discovery and inner peace.";
  const fallbackCategoryName = "Spiritual Essentials";

  return (
    <section className="relative h-[50vh] flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 z-0">
        <Image
          src={`${
            selectedCategory?.image
              ? backendUrl + selectedCategory?.image
              : "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
          }`}
          alt="Category Background"
          layout="fill"
          objectFit="cover"
          quality={100}
          priority
          className="brightness-75"
        />
      </div>

      <div className="relative z-10 text-center px-6 md:px-12 max-w-3xl">
        <motion.h1
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg"
        >
          {selectedCategory?.category_name || fallbackCategoryName}
        </motion.h1>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="text-lg md:text-xl text-gray-200 drop-shadow-md"
          dangerouslySetInnerHTML={{
            __html: cleanHTML(
              selectedCategory?.descriptions || fallbackDescription
            ),
          }}
        />
      </div>
    </section>
  );
};

export default CategoryHero;