'use client';

import Image from "next/image";
import Link from "next/link";
import { Calendar, ArrowLeft } from 'lucide-react';

// تابع استانداردسازی عنوان (بدون تغییر طبق درخواست شما)
const generateSlug = (text: string) => {
    if (!text) return "";
    return text
        .trim()
        .replace(/[\s\u200c]+/g, '-') 
        .replace(/[^\w\u0600-\u06FF0-9\-]/g, '') 
        .replace(/\-\-+/g, '-') 
        .replace(/^-+|-+$/g, ''); 
};

interface Article {
    title: string;
    image: string;
    excerpt: string;
    date: string;
    category?: string; // اختیاری: اگر در دیتا دارید استفاده می‌شود
}

export default function ArticleCard({ article }: { article: Article }) {
    const articleSlug = generateSlug(article.title);

    return (
        <Link href={`/blog/${articleSlug}`} className="group block h-full">
            <div className="bg-white rounded-[2rem] border border-gray-100 shadow-sm  transition-all duration-500 flex flex-col h-[95%] overflow-hidden">
                
                {/* بخش تصویر با نسبت ابعاد متناسب (مربعی‌تر) */}
                <div className="relative aspect-[16/11] w-full overflow-hidden">
                    <Image
                        src={article.image}
                        alt={article.title}
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-110"
                    />
                    {/* لایه گرادینت روی عکس برای عمق دادن */}
                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                </div>

                {/* محتوای متنی */}
                <div className="p-6 flex flex-col flex-grow">
                    {/* تاریخ مقاله */}
                    <div className="flex items-center gap-2 text-gray-400 text-[10px] mb-3 font-semibold uppercase tracking-wider">
                        <Calendar size={13} className="text-yellow-500" />
                        <span>{article.date}</span>
                    </div>

                    {/* عنوان مقاله */}
                    <h3 className="text-[15px] font-bold text-gray-800 mb-3 leading-relaxed group-hover:text-yellow-600 transition-colors line-clamp-2">
                        {article.title}
                    </h3>

                    {/* خلاصه متن */}
                    <p className="text-gray-500 text-xs leading-6 mb-5 line-clamp-2 font-light">
                        {article.excerpt}
                    </p>

                    {/* فوتر کارت - دکمه ادامه مطلب مدرن */}
                    <div className="mt-auto pt-4 border-t border-gray-50 flex items-center justify-between">
                        <span className="text-yellow-600 text-xs font-bold flex items-center gap-1.5 transform -translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">
                            مطالعه مقاله
                            <ArrowLeft size={14} />
                        </span>
                        
                        <div className="w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center text-gray-400 group-hover:bg-yellow-500 group-hover:text-white transition-all duration-300">
                            <ArrowLeft size={16} />
                        </div>
                    </div>
                </div>
            </div>
        </Link>
    );
}