// ArticleHeader.jsx
'use client';

import Container from "../../atoms/Container";
import Heading from "../../atoms/Heading";
import Paragraph from "../../atoms/Paragraph";
import { FaCalendar, FaClock } from "react-icons/fa";
import { Shield, Sparkles, Zap } from 'lucide-react';

export default function ArticleHeader({ article }) {
  const formatDate = (dateString) => {
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(dateString).toLocaleDateString(undefined, options);
  };

  const calculateReadTime = (description) => {
    if (!description) return 5;
    const words = description.split(' ').length;
    return Math.ceil(words / 200);
  };

  const readTime = calculateReadTime(article.description);

  return (
    <div className="relative bg-linear-to-b from-teal-50/30 to-blue-50/30 pt-32 pb-20 overflow-hidden">
      {/* Animated Background */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
        {[...Array(15)].map((_, i) => (
          <div
            key={i}
            className="absolute rounded-full bg-linear-to-r from-teal-200/20 to-blue-200/20 animate-float"
            style={{
              width: Math.random() * 80 + 30,
              height: Math.random() * 80 + 30,
              top: `${Math.random() * 100}%`,
              left: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 3}s`,
              animationDuration: `${Math.random() * 20 + 20}s`
            }}
          />
        ))}
      </div>

      <Container>
        <div className="relative text-center max-w-4xl mx-auto">
          {/* Badge */}
          <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-8 animate-pulse">
            <Shield className="w-5 h-5" />
            Featured Article
          </div>

          <Heading level={1} className="mb-6 text-gray-900 text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
            {article.title}
          </Heading>
          
          <Paragraph className="text-xl text-gray-600 leading-relaxed">
            {article.short_description}
          </Paragraph>

          <div className="flex flex-wrap items-center justify-center gap-3 text-gray-600 mt-5">
            <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full shadow-sm border border-gray-100">
              <FaCalendar className="text-teal-600" />
              <span className="font-medium">{formatDate(article.created_at)}</span>
            </div>
            <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full shadow-sm border border-gray-100">
              <FaClock className="text-teal-600" />
              <span className="font-medium">{readTime} min read</span>
            </div>
            {article.category?.name && (
              <div className="flex items-center gap-2 bg-linear-to-r from-teal-50 to-blue-50 px-4 py-2 rounded-full border border-teal-100">
                <Zap className="w-4 h-4 text-teal-600" />
                <span className="font-semibold text-teal-700">{article.category.name}</span>
              </div>
            )}
          </div>
        </div>
      </Container>
    </div>
  );
}