import Link from 'next/link';

const AboutNews = () => {
    const newsItems = [
        {
            image: '/assets/img/home-1/news/news-1.jpg',
            category: 'Student Visa',
            comments: '08',
            date: '20 August ,2025',
            title: 'Step-by-Step Guide to Applying for a Student Visa',
            author: 'Sohel',
            authorImage: '/assets/img/home-1/news/client.png'
        },
        {
            image: '/assets/img/home-1/news/news-2.jpg',
            category: 'IELTS / TOEFL',
            comments: '08',
            date: '20 August ,2025',
            title: 'Tips to Prepare Financial Documents for Visa Approval',
            author: 'Sohel',
            authorImage: '/assets/img/home-1/news/client.png'
        },
        {
            image: '/assets/img/home-1/news/news-3.jpg',
            category: 'Study Abroad',
            comments: '08',
            date: '20 August ,2025',
            title: 'Post-Arrival Guide What Every Student Should Know',
            author: 'Sohel',
            authorImage: '/assets/img/home-1/news/client.png'
        }
    ];

    return (
        <section className="news-section section-padding fix pt-0">
            <div className="container">
                <div className="section-title-area">
                    <div className="section-title">
                        <span className="sub-title">Visa Tips &amp; Guides</span>
                        <h2 className="split-text-right split-text-in-right">
                            Latest Insights &amp; Updates
                        </h2>
                    </div>
                    <Link href="/news" className="theme-btn">
                        view all articies
                        <i className="fa-solid fa-arrow-right"></i>
                    </Link>
                </div>
                <div className="row">
                    {newsItems.map((item, index) => (
                        <div key={index} className="col-xl-4 col-lg-6 col-md-6">
                            <div className="news-card-item">
                                <div className="news-image">
                                    <img src={item.image} alt="img" />
                                    <span>{item.category}</span>
                                    <div className="news-layer-wrapper">
                                        <div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
                                        <div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
                                        <div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
                                        <div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
                                    </div>
                                </div>
                                <div className="news-content">
                                    <div className="list">
                                        <span>Comment ({item.comments})</span>
                                        <span>_ {item.date}</span>
                                    </div>
                                    <h3>
                                        <Link href="/news-details">
                                            {item.title}
                                        </Link>
                                    </h3>
                                    <div className="news-bottom">
                                        <div className="info-item">
                                            <img src={item.authorImage} alt="img" />
                                            <span>By {item.author}</span>
                                        </div>
                                        <Link href="/news-details" className="link-btn">
                                            View Articles<i className="fa-solid fa-arrow-right"></i>
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default AboutNews;