// ArticleContent.jsx
import Image from "next/image";
import TextDisplay from "../TextDisplay";
import { Zap, Tag } from 'lucide-react';

export default function ArticleContent({ article }) {
  return (
    <div className="relative -mt-10 bg-white rounded-3xl shadow-2xl border border-gray-100 overflow-hidden transform hover:scale-[1.002] transition-all duration-300">
      {/* Action Bar */}
      <div className="flex flex-wrap items-center justify-between p-6 border-b border-gray-200 bg-linear-to-r from-teal-50 to-blue-50">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2 text-teal-700 bg-white px-4 py-2 rounded-full shadow-sm">
            <Tag className="w-4 h-4 text-teal-600" />
            <span className="font-semibold">
              {article.category?.name || "Education"}
            </span>
          </div>

          <div className="hidden md:flex items-center gap-2 text-sm text-gray-600 bg-white/50 px-3 py-1.5 rounded-full">
            <Zap className="w-4 h-4 text-amber-500" />
            <span>Updated recently</span>
          </div>
        </div>
      </div>

      {/* Featured Image */}
      <div className="relative w-full h-48 md:h-125">
        <Image
          src={
            article.image
              ? `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${article.image.replace(/^\/+/, "")}`
              : "/assets/default-article.webp"
          }
          alt={article.title || "Article image"}
          fill
          className="object-contain"
          priority
        />
        <div className="absolute inset-0 bg-linear-to-t from-black/30 to-transparent"></div>
      </div>

      {/* Article Body */}
      <div className="p-8 md:p-12">
        <TextDisplay 
          content={article.description} 
          className="prose prose-lg max-w-none overflow-hidden wrap-break-word
                      prose-headings:text-gray-900 prose-headings:font-bold
                      prose-p:text-gray-700 prose-p:leading-relaxed
                      prose-li:text-gray-700 
                      prose-a:text-teal-600 prose-a:no-underline hover:prose-a:underline hover:prose-a:text-blue-600
                      prose-strong:text-gray-900 prose-strong:font-bold
                      prose-blockquote:border-l-4 prose-blockquote:border-teal-300 prose-blockquote:bg-teal-50/50
                      prose-blockquote:py-2 prose-blockquote:px-4 prose-blockquote:rounded-r-lg
                      sn-content"
        />
      </div>
    </div>
  );
}