"use client";

import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import Breadcrumb from "@/components/Breadcrumb";
import { Calendar, User } from "lucide-react";
import { getBlogDataById, getRelatedArticle } from "@/lib/blog";

export default function BlogPostPage() {
  const params = useParams();
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);
  const [relatedArticle, setRelateArticle] = useState([]);

  useEffect(() => {
    // In a real app, this would be an API call
    const fetchPost = async () => {
      setLoading(true);
      const blog = await getBlogDataById(params?.id);
      setPost(blog);
      setLoading(false);
      const related = await getRelatedArticle(blog.category, blog?.url);
      setRelateArticle(related);
    };

    fetchPost();
  }, [params.id]);

  if (loading) {
    return (
      <div className="container mx-auto px-4 py-12 flex justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-teal-600"></div>
      </div>
    );
  }

  if (!post) {
    return (
      <div className="container mx-auto px-4 py-12">
        <h1 className="text-2xl font-bold">Blog post niet gevonden</h1>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-6">
      <span className="hidden md:inline">
        <Breadcrumb
          items={[
            { label: "Blog", href: "/blog" },
            { label: post.url, href: `/blog/${post.url}` },
          ]}
        />
      </span>

      <span className="md:hidden">
        <Breadcrumb
          items={[
            { label: "Blog", href: "/blog" },
            { label: post.url, href: `/blog/${post.url}` },
          ]}
        />
      </span>

      <div className="max-w-4xl mx-auto mt-8">
        <div className="mb-6">
          <span className="bg-teal-100 text-teal-800 px-3 py-1 rounded-full text-sm font-medium">
            {post.category}
          </span>
        </div>

        <h1 className="text-2xl md:text-4xl font-bold mb-6">
          {post.shortTitle}
        </h1>

        <div className="flex flex-col md:flex-row gap-1 md:justify-between md:items-center text-gray-500 mb-8">
          <div className="flex items-center mr-6">
            <User size={18} className="mr-2" />
            <span>{post.author}</span>
          </div>
          <div className="flex items-center">
            <Calendar size={18} className="mr-2" />
            <span>{post.date}</span>
          </div>
        </div>

        <div className="relative h-80 w-full mb-8 rounded-lg overflow-hidden">
          <Image
            src={post.image || "/placeholder.svg"}
            alt={post.title}
            fill
            className="object-cover"
          />
        </div>

        <div
          className="prose max-w-none mb-8"
          dangerouslySetInnerHTML={{ __html: post.content }}
        />

        {/* <div className="mt-12">
          <h3 className="text-2xl font-bold mb-6">Gerelateerde artikelen</h3>

          {relatedArticle?.length > 0 ? (
            <div className="grid md:grid-cols-3 gap-6">
              {relatedArticle.map((item) => (
                <div
                  key={item}
                  className="bg-white rounded-lg shadow-sm overflow-hidden">
                  <Link href={`/blog/${item}`} className="block">
                    <div className="relative h-40 w-full">
                      <Image
                        src="https://img.waimaoniu.net/2016/2016-202009081713023878.jpg"
                        alt="Blog post"
                        fill
                        className="object-cover"
                      />
                    </div>
                  </Link>

                  <div className="p-4">
                    <h4 className="font-bold mb-2 hover:text-teal-600 transition-colors">
                      <Link href={`/blog/${item}`}>
                        Gerelateerd artikel titel
                      </Link>
                    </h4>

                    <div className="flex items-center text-sm text-gray-500">
                      <Calendar size={14} className="mr-1" />
                      <span>10 maart 2025</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <h2 className="text-gray-600">
              Geen gerelateerde artikelen gevonden
            </h2>
          )}
        </div> */}
      </div>
    </div>
  );
}
