/* ====================================================
 * Latest News Section
 * News cards grid with date badges
 * ==================================================== */

'use client';

import Link from 'next/link';
import Image from 'next/image';
import { HiArrowRight, HiOutlineEye, HiOutlineCalendar } from 'react-icons/hi';
import SectionHeader from '@/components/common/SectionHeader';
import ScrollReveal from '@/components/common/ScrollReveal';
import { formatDate, formatNumber } from '@/utils';
import { NewsArticle } from '@/types/api';

interface LatestNewsProps {
  initialNews: NewsArticle[];
}

export default function LatestNews({ initialNews }: LatestNewsProps) {
  const latestNews = initialNews.slice(0, 4);
  const mainArticle = latestNews[0];
  const sideArticles = latestNews.slice(1);

  if (!mainArticle) {
    return null; // Don't render section if no news
  }

  return (
    <section className="section-padding bg-white">
      <div className="container-custom">
        <SectionHeader
          subtitle="Tin tức"
          title="Tin tức mới nhất"
          description="Cập nhật những tin tức mới nhất về Vitalist Pharma, sản phẩm và hoạt động cộng đồng."
        />

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Main Article */}
          <ScrollReveal animation="fadeLeft">
            <Link href={`/tin-tuc/${mainArticle.slug}`} className="group block h-full">
              <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-primary-100 to-accent-100 aspect-[4/3] mb-5">
                {mainArticle.thumbnail ? (
                  <Image 
                    src={mainArticle.thumbnail} 
                    alt={mainArticle.title}
                    fill
                    className="object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                ) : (
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="w-20 h-20 rounded-full bg-primary-500/10 flex items-center justify-center text-4xl">
                      📰
                    </div>
                  </div>
                )}
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark-900/80 via-dark-900/40 to-transparent p-6 z-10">
                  <span className="inline-block px-3 py-1 bg-primary-500 text-white text-xs font-semibold rounded-full mb-3">
                    {mainArticle.category?.name}
                  </span>
                  <h3 className="text-xl font-bold text-white group-hover:text-primary-200 transition-colors line-clamp-2">
                    {mainArticle.title}
                  </h3>
                </div>
              </div>
              <p className="text-dark-400 text-sm line-clamp-2 mb-3">{mainArticle.excerpt}</p>
              <div className="flex items-center gap-4 text-xs text-dark-400">
                <span className="flex items-center gap-1">
                  <HiOutlineCalendar className="w-4 h-4" />
                  {formatDate(mainArticle.created_at)}
                </span>
                <span className="flex items-center gap-1">
                  <HiOutlineEye className="w-4 h-4" />
                  {formatNumber(mainArticle.view_count)} lượt xem
                </span>
              </div>
            </Link>
          </ScrollReveal>

          {/* Side Articles */}
          <div className="space-y-5">
            {sideArticles.map((article, index) => (
              <ScrollReveal key={article.id} animation="fadeRight" delay={index * 0.1}>
                <Link href={`/tin-tuc/${article.slug}`} className="group flex gap-5 items-start">
                  <div className="w-32 h-24 shrink-0 rounded-xl overflow-hidden bg-gradient-to-br from-primary-50 to-accent-100 flex items-center justify-center relative">
                    {article.thumbnail ? (
                      <Image 
                        src={article.thumbnail} 
                        alt={article.title}
                        fill
                        className="object-cover transition-transform duration-500 group-hover:scale-110"
                      />
                    ) : (
                      <span className="text-2xl">📰</span>
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <span className="text-xs font-medium text-primary-500 uppercase tracking-wider">
                      {article.category?.name}
                    </span>
                    <h3 className="text-sm font-semibold text-dark-700 group-hover:text-primary-600 transition-colors line-clamp-2 mt-1">
                      {article.title}
                    </h3>
                    <div className="flex items-center gap-3 mt-2 text-xs text-dark-400">
                      <span className="flex items-center gap-1">
                        <HiOutlineCalendar className="w-3.5 h-3.5" />
                        {formatDate(article.created_at)}
                      </span>
                      <span className="flex items-center gap-1">
                        <HiOutlineEye className="w-3.5 h-3.5" />
                        {formatNumber(article.view_count)}
                      </span>
                    </div>
                  </div>
                </Link>
              </ScrollReveal>
            ))}

            <ScrollReveal animation="fadeRight" delay={0.3}>
              <Link
                href="/tin-tuc"
                className="inline-flex items-center gap-2 text-primary-500 hover:text-primary-600 font-semibold text-sm transition-colors mt-3"
              >
                Xem tất cả tin tức
                <HiArrowRight className="w-4 h-4" />
              </Link>
            </ScrollReveal>
          </div>
        </div>
      </div>
    </section>
  );
}