"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import data from "@/util/case-study.json";

export default function BlogDetailsClient({ slug }) {
    const [casePost, setcasePost] = useState(null);

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

    if (!casePost) return null;

    return (
        <div className="row">
            <div className="col-12">
                <div className="section-title text-center mb-40 tg-heading-subheading animation-style3">
                    <h2 className="title tg-element-title">Case Study: {casePost.title}</h2>
                </div>
            </div>
            <div className="col-12">
                <div className="project__details-top">
                    <div className="row">
                        <div className="col-70">
                            {casePost.img.endsWith(".png") || casePost.img.endsWith(".webp") ? (
                                <div className="project__details-thumb">
                                    <img src={`/assets/img/case-study/${casePost.img}`} alt="" />
                                </div>
                            ) : casePost.img.endsWith(".webm") || casePost.img.endsWith(".mp4") ? (
                                <div className="project__details-thumb">
                                    <video src={`/assets/img/case-study/${casePost.img}`} autoPlay muted loop alt="" />
                                </div>
                            ) : null}
                        </div>
                        <div className="col-30">
                            <div className="project__details-info">
                                <h4 className="title">Company Details</h4>
                                <ul className="list-wrap">
                                    <li>
                                        <span>Client:</span>
                                        {casePost.title}
                                    </li>
                                    <li>
                                        <span>Website:</span>
                                        <Link href={casePost.website} className="case-study-link">
                                            {casePost.websiteName}
                                        </Link>
                                    </li>
                                    <li>
                                        <span>Industry:</span>
                                        {casePost.industry}
                                    </li>
                                    <li>
                                        <span>Services utilized:</span>
                                        {casePost.utilized}
                                    </li>
                                    <li>
                                        <span>Review:</span>
                                        <Link href={casePost.reviewUrl} target="_blank">
                                            <div className="case-study-rating">
                                                <i className="fas fa-star" />
                                                <i className="fas fa-star" />
                                                <i className="fas fa-star" />
                                                <i className="fas fa-star" />
                                                <i className="fas fa-star" />
                                            </div>
                                        </Link>
                                    </li>
                                    <li>
                                        <span>Share:</span>
                                        <ul className="list-wrap project-social">
                                            <li>
                                                <Link
                                                    href={`https://www.facebook.com/sharer/sharer.php?u=${window.location.origin}/blog/${casePost.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/${casePost.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/${casePost.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/${casePost.slug}&media=&description=`}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    <i className="fab fa-pinterest-p" />
                                                </Link>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}