import React, { Fragment } from 'react';
import Navbar from '../../../../components/Navbar/Navbar';
import Footer from '../../../../components/footer/Footer';
import { Scrollbar } from 'swiper';
import blogs from '../../../../api/blogs'; // Assuming you have a local blogs API
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/router';
import SocialMediaButtons from '../../../../components/SocialMediaButtonsIcon/SocialMediaButtonsIcon';
import { Link } from '@mui/material';
import { FaFacebook, FaTelegramPlane, FaWhatsapp, FaYoutube, FaLinkedin, FaMapMarkerAlt } from 'react-icons/fa';
const BlogDetails = ({ post }) => {
    const { locale } = useRouter();
    const t = useTranslations("Blog");
    const iconStyle = { fontSize: '2rem', color: '#fff' }; // Adjust the icon size and color here
    if (!post) {
        return <div>Loading...</div>;
    }
    const ClickHandler = (event) => {
        event.preventDefault();
        const href = event.currentTarget.getAttribute('href');
        window.open(href, '_blank');
    };
    return (
        <Fragment>
            <Navbar hclass={"wpo-header-style-2"} topbarNone={"topbar-none"} />

            <section className="wpo-blog-section section-padding">
                <div className="container mt-5">
                    <div className="wpo-blog-wrap">
                        <div className="wpo-blog-items">
                            <div style={{ alignItems: "start" }} className="row">
                                <div className="col-md-4 mb-5">
                                    <div style={{ color: "#fff", textAlign: "center" }}>
                                        <img src={post.image} alt="" />
                                    </div>
                                    <div style={{ display: "flex", flexDirection: "column", alignContent: "center", justifyContent: "center", alignItems: "center", backgroundColor: "#ad9071", marginTop: "1rem", padding: "1rem", borderRadius: "1rem" }}>
                                        <h2 style={{ color: "#fff", marginBottom: "1rem" }}>{t("bolg_order")}</h2>
                                        <ul style={{ display: 'flex', listStyle: 'none', padding: 0, margin: 0 }}>
                                            <li style={{ margin: '0 10px' }}>
                                                <Link onClick={ClickHandler} href="https://wa.me/message/VCDI6QIX546XF1" style={{ textDecoration: 'none' }}>
                                                    <FaWhatsapp style={iconStyle} />
                                                </Link>
                                            </li>
                                            <li style={{ margin: '0 10px' }}>
                                                <Link onClick={ClickHandler} href="https://t.me/dokkaneldraib" style={{ textDecoration: 'none' }}>
                                                    <FaTelegramPlane style={iconStyle} />
                                                </Link>
                                            </li>
                                            <li style={{ margin: '0 10px' }}>
                                                <Link onClick={ClickHandler} href="https://www.linkedin.com/in/mostafa-salama-24476253?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" style={{ textDecoration: 'none' }}>
                                                    <FaLinkedin style={iconStyle} />
                                                </Link>
                                            </li>
                                            <li style={{ margin: '0 10px' }}>
                                                <Link onClick={ClickHandler} href="https://www.facebook.com/dokkaneldraib2?mibextid=LQQJ4d" style={{ textDecoration: 'none' }}>
                                                    <FaFacebook style={iconStyle} />
                                                </Link>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div className="col-md-8">
                                    <div>
                                        <h2 style={{ color: "#fff" }}>{locale === "ar" ? post.research_name_ar : post.research_name_en}</h2>
                                        {/* <p>{t(post.slug)}</p> */}
                                    </div>
                                    <div>
                                        <p style={{ color: "#fff" }}>{locale === "ar" ? post.research_description_ar : post.research_description_en}</p>
                                        {/* <p>{t(post.slug)}</p> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <Footer />
            {/*  <Scrollbar /> */}
        </Fragment>
    )
}

export async function getStaticPaths() {
    const res = await fetch(
        `https://dokan-backend.d-menus.com/research`
    );
    const data = await res.json();
    // console.log(data);

    const paths = data.allResearches.map((blog) => ({
        params: { id: blog.id.toString() },
    }));
    // const paths = blogs.map((blog) => ({
    //     params: { id: blog.id.toString() },
    // }));

    return {
        paths,
        fallback: true,
    };
}

export async function getStaticProps({ params, locale }) {
    const res = await fetch(
        `https://dokan-backend.d-menus.com/research`
    );
    const data = await res.json();
    // console.log(data);

    const post = data.allResearches.find(blog => blog.id.toString() === params.id);
    // const post = blogs.find(blog => blog.id.toString() === params.id);

    return {
        props: {
            post,
            messages: (await import(`../../../../messages/${locale}.json`)).default,
        },
        revalidate: 10,
    };
}

export default BlogDetails;
