"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import data from "@/util/blog.json";

export default function BlogCta({ slug }) {
    const [blogPost, setBlogPost] = useState(null);

    useEffect(() => {
        setBlogPost(data.find((item) => item.slug === slug));
    }, [data, slug]);

    if (!blogPost) return null;

    return (
        <div>
            <div className="blog__details-bottom">
                <div className="row align-items-center">
                    <div className="col-md-7">
                        <div className="post-tags">
                            <h5 className="title">Tags:</h5>
                            <ul className="list-wrap">
                                {blogPost.tags.map((tag) => (
                                    <li key={tag}>
                                        <Link href="#">{tag}</Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                    <div className="col-md-5">
                        <div className="post-share">
                            <h5 className="title">Share:</h5>
                            <ul className="list-wrap">
                                <li>
                                    <Link
                                        href={`https://www.facebook.com/sharer/sharer.php?u=${window.location.origin}/blog/${blogPost.slug}`}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                    >
                                        <i className="fab fa-facebook-f" />
                                    </Link>
                                </li>
                                <li>
                                    <Link
                                        href={`https://twitter.com/intent/tweet?text=Check out this blog post: ${window.location.origin}/blog/${blogPost.slug}`}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                    >
                                        <i className="fab fa-twitter" />
                                    </Link>
                                </li>
                                <li>
                                    <Link
                                        href={`https://www.instagram.com/p/${window.location.origin}/blog/${blogPost.slug}`}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                    >
                                        <i className="fab fa-instagram" />
                                    </Link>
                                </li>
                                <li>
                                    <Link
                                        href={`https://pinterest.com/pin/create/bookmarklet/?url=${window.location.origin}/blog/${blogPost.slug}&media=&description=`}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                    >
                                        <i className="fab fa-pinterest-p" />
                                    </Link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}