import { getCmsImageUrl } from '@/utils/image';
import Link from 'next/link';

interface BlogPreviewProps {
    data: {
        heading: string;
        subheading: string;
        ctaButton: {
            label: string;
            href: string;
        };
        items: {
            title: string;
            excerpt: string;
            category: string;
            date: string;
            author: {
                name: string;
                avatar: string;
            };
            comments: number;
            link: string;
            thumbnail: string;
        }[];
    };
}

const BlogPreview = ({ data }: BlogPreviewProps) => {
    const formatDate = (dateString: string) => {
        const date = new Date(dateString);
        return date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
    };

    return (
        <section className="news-section section-padding fix">
            <div className="container">
                <div className="section-title-area">
                    <div className="section-title">
                        <span className="sub-title wow fadeInUp">{data.subheading}</span>
                        <h2 className="split-text-right split-text-in-right">
                            {data.heading}
                        </h2>
                    </div>
                    <Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".3s">
                        {data.ctaButton.label}
                        <i className="fa-solid fa-arrow-right"></i>
                    </Link>
                </div>
                <div className="row">
                    {data.items.map((item, index) => {
                        const thumbUrl = getCmsImageUrl(item.thumbnail);
                        return (
                            <div key={index} className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay={`.${(index + 1) * 2 + 1}s`}>
                                <div className="news-card-item">
                                    <div className="news-image">
                                        <img 
                                            src={thumbUrl} 
                                            alt="img" 
                                            style={{ 
                                                width: '419px', 
                                                height: '312px', 
                                                objectFit: 'cover' 
                                            }} 
                                        />
                                        <span>{item.category}</span>
                                        <div className="news-layer-wrapper">
                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
                                        </div>
                                    </div>
                                    <div className="news-content">
                                        <div className="list">
                                            <span>Comment ({item.comments.toString().padStart(2, '0')})</span>
                                            <span>_ {formatDate(item.date)}</span>
                                        </div>
                                        <h3>
                                            <Link href={item.link}>
                                                {item.title}
                                            </Link>
                                        </h3>
                                        <div className="news-bottom">
                                            <div className="info-item">
                                                <div 
                                                    style={{ 
                                                        width: '32px', 
                                                        height: '32px', 
                                                        backgroundColor: '#d1d5db', 
                                                        display: 'flex', 
                                                        alignItems: 'center', 
                                                        justifyContent: 'center',
                                                        fontSize: '14px',
                                                        fontWeight: 'bold',
                                                        color: '#374151',
                                                        marginRight: '10px'
                                                    }}
                                                >
                                                    {item.author.name.charAt(0).toUpperCase()}
                                                </div>
                                                <span>By {item.author.name}</span>
                                            </div>
                                            <Link href={item.link} className="link-btn">View Articles<i className="fa-solid fa-arrow-right"></i></Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </section>
    );
};

export default BlogPreview;