import React, { useState, useEffect } from "react";
import { marked } from 'marked';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import { Button } from "./ui/button";
import { useIsLoggedIn } from '../lib/isLoggedIn';
import { token, user_name, pb_id } from '../lib/CookieValues';
import CommentSystem from './CommentSystem/CommentSystem';
const COMMENTS_API_URL = 'https://host-api-sxashuasysagibx.siliconpin.com/v1/comments/';
export default function TopicDetail(props) {
// console.log('coockie data', user_name)
const [showCopied, setShowCopied] = useState(false);
if (!props.topic) {
return Topic not found
;
}
const shareUrl = typeof window !== 'undefined' ? window.location.href : '';
const title = props.topic.title;
const text = `Check out this article: ${title}`;
const shareOnSocialMedia = (platform) => {
switch (platform){
case 'facebook':
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, '_blank');
break;
case 'twitter':
window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(text)}`, '_blank');
break;
case 'linkedin':
window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(title)}`, '_blank');
break;
case 'reddit':
window.open(`https://www.reddit.com/submit?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(title)}`, '_blank');
break;
case 'whatsapp':
window.open(`https://wa.me/?text=${encodeURIComponent(`${text} ${shareUrl}`)}`, '_blank');
break;
case 'email':
window.open(`mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(`${text}\n\n${shareUrl}`)}`);
break;
}
}
const copyToClipboard = () => {
navigator.clipboard.writeText(shareUrl);
setShowCopied(true);
setTimeout(() => setShowCopied(false), 2000);
};
// SVG Icons with improved styling
const SocialIcon = ({ children, className = "" }) => (
{children}
);
const FacebookIcon = () => (
);
const TwitterIcon = () => (
);
const LinkedInIcon = () => (
);
const RedditIcon = () => (
);
const WhatsAppIcon = () => (
);
const MailIcon = () => (
);
const LinkIcon = () => (
);
return (
{props.topic.title}
{/* Enhanced Social Share Buttons */}
Share this Topic:
{showCopied && (
Link copied!
)}
);
}
// bg-[#6d9e37]