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.sTitle} pagesub={'Services Details'} />

            <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">
                                        <div style={{ width: "100%", height: "400px", position: "relative" }}>
                                            <Image
                                                src={service.sImgS}
                                                alt={service.sTitle}
                                                fill
                                                style={{ objectFit: "cover" }}
                                            />
                                        </div>
                                    </div>


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

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

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

                                    {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;