'use client'

import { useState, useEffect } from "react"
import axios from "axios"
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"
import Link from "next/link"

export default function Blog() {
	const [blogs, setBlogs] = useState<any[]>([]);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		const fetchBlogs = async () => {
			try {
				const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
				const response = await axios.get(`${API_BASE_URL}/blogs`);
				if (response.data && response.data.success) {
					setBlogs(response.data.data);
				}
			} catch (error) {
				console.error("Error fetching blogs:", error);
			} finally {
				setLoading(false);
			}
		};
		fetchBlogs();
	}, []);

	return (
		<>

			<Layout headerStyle={1} footerStyle={1}>
				<div>
					<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg13.png)' }}>
						<div className="container">
							<div className="row">
								<div className="col-lg-12 m-auto">
									<div className="heading1">
										<h1>Our Blog</h1>
										<div className="space20" />
										<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>Our Blog</span></Link>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/*===== HERO AREA ENDS =======*/}
					{/*===== BLOG AREA STARTS =======*/}
					<div className="bloginner-section-area sp1">
						<div className="container">
							<div className="row">
								{loading ? (
									<div className="col-12 text-center" style={{ padding: '100px 0' }}>
										<div className="spinner-border text-danger" role="status">
											<span className="visually-hidden">Loading...</span>
										</div>
									</div>
								) : blogs.length === 0 ? (
									<div className="col-12 text-center" style={{ padding: '100px 0' }}>
										<h3>No blog posts available at the moment.</h3>
									</div>
								) : (
									blogs.map((blog) => (
										<div key={blog.id} className="col-lg-4 col-md-6 mb-4" data-aos="zoom-in" data-aos-duration={800}>
											<div className="blog4-boxarea">
												<div className="img1">
													<img src={blog.image || "/assets/img/all-images/blog/blog-img4.png"} alt={blog.title} style={{ width: '100%', height: '280px', objectFit: 'cover' }} />
												</div>
												<div className="content-area">
													<ul>
														<li>
															<Link href="#"><img src="/assets/img/icons/calender1.svg" alt="" />{blog.date || 'No Date'} <span> | </span></Link>
														</li>
														<li>
															<Link href="#"><img src="/assets/img/icons/user1.svg" alt="" />{blog.author}</Link>
														</li>
													</ul>
													<div className="space20" />
													<Link href={`/blog-single`}>{blog.title}</Link>
													<div className="space24" />
													<Link href={`/blog-single`} className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
													<div className="arrow">
														<Link href={`/blog-single`}><i className="fa-solid fa-arrow-right" /></Link>
													</div>
												</div>
											</div>
										</div>
									))
								)}
								<div className="space30" />
								{blogs.length > 0 && (
									<div className="pagination-area">
										<nav aria-label="Page navigation example">
											<ul className="pagination">
												<li className="page-item">
													<Link className="page-link" href="#" aria-label="Previous">
														<i className="fa-solid fa-angle-left" />
													</Link>
												</li>
												<li className="page-item"><Link className="page-link active" href="#">1</Link></li>
												<li className="page-item"><Link className="page-link" href="#">2</Link></li>
												<li className="page-item"><span className="page-link">...</span></li>
												<li className="page-item"><Link className="page-link" href="#">12</Link></li>
												<li className="page-item">
													<Link className="page-link" href="#" aria-label="Next">
														<i className="fa-solid fa-angle-right" />
													</Link>
												</li>
											</ul>
										</nav>
									</div>
								)}
							</div>
						</div>
					</div>
					{/*===== BLOG AREA ENDS =======*/}
					{/*===== CTA AREA STARTS =======*/}
					<div className="cta1-section-area d-lg-block d-block">
						<div className="container">
							<div className="row">
								<div className="col-lg-10 m-auto">
									<div className="cta1-main-boxarea">
										<div className="timer-btn-area">
										<Countdown />
											<div className="btn-area1">
												<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
											</div>
										</div>
										<ul>
											<li>
												<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
											</li>
											<li className="m-0">
												<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/*===== CTA AREA ENDS =======*/}
					{/*===== CTA AREA STARTS =======*/}
					<div className="cta1-section-area d-lg-none d-block">
						<div className="container">
							<div className="row">
								<div className="col-lg-10 m-auto">
									<div className="cta1-main-boxarea">
										<div className="timer-btn-area">
										<Countdown />
											<div className="btn-area1">
												<Link href="/pricing-plan" className="vl-btn1">Buy Ticket</Link>
											</div>
										</div>
										<ul>
											<li>
												<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
											</li>
											<li className="m-0">
												<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</Layout>
		</>
	)
}