"use client";

import React, { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { apiCall } from "@/utils/callApi";
import Newsletter from "@/components/frontend-pages/home/Newsletter";

interface BlogType {
  _id: string;
  title: string;
  sub_title: string;
  slug: string;
  description: string;
  short_description: string;
  images: string[];
  createdAt: string;
  updatedAt: string;
}

export default function Page() {
  const params = useParams();
  const slug = params.slug as string;

  const [blog, setBlog] = useState<BlogType | null>(null);
  const [loading, setLoading] = useState(true);

  const fetchBlog = async () => {
    try {
      const resp: any = await apiCall(`/clientapi/blog/${slug}`);

      if (resp?.data?.success) {
        setBlog(resp.data.data);
      }
    } catch (error) {
      console.error("Error fetching blog:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (slug) {
      fetchBlog();
    }
  }, [slug]);

  if (loading) {
    return (
      <div className="container mx-auto py-10">
        <div className="text-center">Loading...</div>
      </div>
    );
  }

  if (!blog) {
    return (
      <div className="container mx-auto py-10">
        <div className="text-center text-red-500">Blog not found</div>
      </div>
    );
  }

  return (
    <main className="font-montserrat">
      {/* Breadcrumb */}
      <section className="breadcrumbcontainer">
        <div className="container px-3">
          <ol className="breadcrumb">
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/blog">Blogs</a>
            </li>
            <li className="active">{blog.title}</li>
          </ol>
        </div>
      </section>

      {/* Blog Content */}
      <section className="staticpagecontainer py-10">
        <div className="container px-3">
          <div className="flex flex-wrap">
            <div className="w-full">
              {blog.images?.length > 0 && (
                <img
                  src={blog.images[0]}
                  alt={blog.title}
                  className="h-auto w-full object-cover"
                />
              )}
              <div className="mb-6 text-sm text-gray-500">
                Published on{" "}
                {new Date(blog.createdAt).toLocaleDateString("en-IN", {
                  day: "numeric",
                  month: "long",
                  year: "numeric",
                })}
              </div>
              <div className="section-heading">
                <h1>{blog.title}</h1>
              </div>

              {/* Blog Description */}
              <div
                className="prose prose-lg max-w-none"
                dangerouslySetInnerHTML={{
                  __html: blog.description,
                }}
              />
            </div>
          </div>
        </div>
      </section>
      <Newsletter />
    </main>
  );
}