"use client";
import React, { useState } from "react";
import Link from "next/link";
import { BlogData } from "@/utils/constant.utils";
import { useRouter } from "next/navigation";
import BlogSidebar from "./BlogSidebar";

interface BlogDetailsProps {
    blog: any;
}

const BlogDetails = ({ blog }: BlogDetailsProps) => {
    const router = useRouter();
    const [activeIndex, setActiveIndex] = useState<number | null>(null);

    const toggleAccordion = (index: number) => {
        setActiveIndex(activeIndex === index ? null : index);
    };

    const handleCategoryClick = (category: string) => {
        router.push(`/blog/results?category=${encodeURIComponent(category)}`);
    };

    const handleSearch = (term: string) => {
        router.push(`/blog/results?search=${encodeURIComponent(term)}`);
    };

    return (
        <section className="blog-details-area news-area section-space">
            <div className="container">
                <div className="row">
                    <div className="col-lg-4">
                        <BlogSidebar
                            activeCategory={blog.category}
                            onCategoryClick={handleCategoryClick}
                            onSearch={handleSearch}
                        />
                    </div>
                    <div className="col-lg-8">
                        <div className="blog-details-content">
                            <div className="blog-details-img mb-40">
                                <img src={blog.big_image || blog.image} alt={blog.title} className="w-100" />
                            </div>

                            <div className="blog-meta mb-30">
                                <span><i className="fa-solid fa-user"></i> By Admin</span>
                                <span><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
                                <span><i className="fa-solid fa-tag"></i> {blog.category}</span>
                            </div>

                            <h2 className="details-title mb-30">{blog.title}</h2>

                            {/* Render the full HTML content from description */}
                            <div
                                className="details-text"
                                dangerouslySetInnerHTML={{ __html: blog.description || '' }}
                            />

                            {blog.faq && blog.faq.length > 0 && (
                                <div className="blog-faq-section">
                                    <div className="sec-title mb-40">
                                        <div className="sec-title__shape"></div>
                                        <h6 className="sec-title__tagline">Blog FAQ</h6>
                                        <h3 className="sec-title__title">Frequently Asked Questions</h3>
                                    </div>
                                    <div className="faq-one__accordion pelocis-accrodion">
                                        {blog.faq.map((item: any, index: number) => (
                                            <div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
                                                <div className="accrodion-title" onClick={() => toggleAccordion(index)}>
                                                    <div className="accrodion-title__shape"></div>
                                                    <div className="accrodion-title__icon">
                                                        <i className="fa fa-check"></i>
                                                    </div>
                                                    <h4>
                                                        {item.question}
                                                        <i className="icon-right-arrow-white"></i>
                                                    </h4>
                                                </div>
                                                <div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
                                                    <div className="inner">
                                                        <p>{item.answer}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>


                </div>
            </div>
        </section>
    );
};

export default BlogDetails;