import React, { Fragment } from 'react';
import Navbar2 from '../../components/Navbar2/Navbar2';
import PageTitle from '../../components/pagetitle/PageTitle';
import Scrollbar from '../../components/scrollbar/scrollbar';
import { useRouter } from 'next/router';
import Campaign from '../../api/campaign';
import Footer from '../../components/footer/Footer';
import Image from 'next/image';
import Link from 'next/link';

const ServiceDetailsPage = () => {
    const router = useRouter();
    const { slug } = router.query;

    const service = Campaign.find(item => item.slug === slug);

    if (!service) {
        return (
            <Fragment>
                <Navbar2 />
                <div className="container text-center py-5">
                    <h2>Service not found!</h2>
                    <Link href="/">Back to Home</Link>
                </div>
                <Footer />
                <Scrollbar />
            </Fragment>
        );
    }

    return (
        <Fragment>
            <Navbar2 />
            <PageTitle pageTitle={service.title} pagesub={'Services'} />

            <section className="wpo-blog-single-section section-padding">
                <div className="container">
                    <div className="row">
                        <div className="col-12">
                            <div className="wpo-blog-content">
                                <div className="post format-standard-image">

                                    <div className="entry-media" style={{ width: "100%", height: "auto", overflow: "hidden" }}>
                                        <Image
                                            src={service.cImg}
                                            alt={service.title}
                                            width={800}
                                            height={500}
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>

                                    <div className="entry-meta">
                                        <ul>
                                            <li>
                                                <i className="fi flaticon-user"></i> By{' '}
                                                <span>{service.author || 'Admin'}</span>
                                            </li>
                                            <li>
                                                <i className="fi flaticon-calendar"></i> {service.date}
                                            </li>
                                        </ul>
                                    </div>

                                    <h2>{service.title}</h2>

                                    <div dangerouslySetInnerHTML={{ __html: service.description }} />

                                    {service.blockquotes && service.blockquotes.map((quote, idx) => (
                                        <blockquote key={idx}>{quote}</blockquote>
                                    ))}

                                    {service.gallery && (
                                        <div className="gallery">
                                            {service.gallery.map((img, i) => (
                                                <div key={i}>
                                                    <Image src={img} alt={`Gallery ${i}`} width={400} height={300} />
                                                </div>
                                            ))}
                                        </div>
                                    )}

                                    {service.extraText && <p className="mt-4">{service.extraText}</p>}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <Footer />
            <Scrollbar />
        </Fragment>
    );
};

export default ServiceDetailsPage;