frontend/src/sections/blogs/BlogPageSection.jsx

import React from "react";
import Hero from "./Hero";
import styled from "styled-components";
import { FaXTwitter, FaLinkedin } from "react-icons/fa6";

// Styled Components
const Container = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  align-items: center;
`;

const Header = styled.div`
  padding-top: 16px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 32px;
`;

const Category = styled.span`
  display: inline-block;
  background-color: #2d3748;
  color: #3f7ad3;
  font-size: 14px;
  font-family: "Arial", sans-serif;
  padding: 4px 12px;
  border-radius: 16px;
  margin-bottom: 16px;
`;

const Title = styled.h2`
  font-family: "Arial", sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: #3267B9;
  margin-bottom: 16px;
`;

const Meta = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-family: "Arial", sans-serif;
  font-size: 14px;

  span {
    color: #9ca3af;
  }
`;

const Content = styled.div`
  padding: 32px 0;
  border-bottom: 1px solid #e2e8f0;
  line-height: 1.8;

  p {
    font-family: "Arial", sans-serif;
    color: #d5d5d5;
    margin: 16px 0;
  }

  h3 {
    font-family: "Arial", sans-serif;
    color: rgb(230, 230, 230);
    margin: 32px 0 16px;
    font-size: 1.75rem;
  }

  ul {
    list-style-type: disc;
    margin-left: 20px;
  }

  blockquote {
    font-family: "Georgia", serif;
    color: #6b7280;
    font-size: 1rem;
    margin: 24px 0;
    padding: 12px 24px;
    border-left: 4px solid #3f7ad3;
    background-color: #2d3748;
  }

  a {
    color: #3b82f6;
    text-decoration: underline;
    transition: color 0.3s;

    &:hover {
      color: #2563eb;
    }
  }

  pre {
    background-color: #2d3748;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;

    code {
      font-family: "Courier New", monospace;
      color: #d5d5d5;
    }
  }

  img {
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
    justify-self: center;
  }
`;

const TwitterCard = styled.div`
  margin: 32px 0;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #2d3748;

  h4 {
    font-family: "Arial", sans-serif;
    font-size: 1.25rem;
    color: #d5d5d5;
    margin-bottom: 8px;
  }

  span {
    font-family: "Arial", sans-serif;
    color: #d5d5d5;
    font-size: 14px;
    padding-right: 2em;
  }

  button {
    margin-top: 16px;
    padding: 8px 16px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    color: #ffffff;
    background-color: #1d9bf0;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #1a8cd8;
    }
  }
`;

const SocialShare = styled.div`
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 0;

  span {
    font-family: "Arial", sans-serif;
    font-weight: 500;
    color: #d5d5d5;
  }

  a {
    color: #d5d5d5;
    transition: color 0.3s;

    &:hover {
      color: #3f7ad3;
    }
  }
`;

const BlogPageSection = ({ post }) => {
    if (!post || !post.content) {
      return <div>Blog content is not available at the moment.</div>;
    }
  
    const { category, title, date, readTime, author, content } = post;
  
    return (
      <>
        <Hero />
        <Container>
          {/* Blog Header */}
          <Header>
            <Category>{category || "Category not available"}</Category>
            <Title>{title || "Title not available"}</Title>
            <Meta>
              <p>{author || "Author not available"}</p>
              <span>//</span>
              <p>{date || "Date not available"}</p>
              <span>//</span>
              <p>{readTime || "Read time not available"}</p>
            </Meta>
          </Header>
  
          {/* Blog Content */}
          <Content>
            {content && content.length > 0 ? (
              content.map((item, index) => {
                switch (item.type) {
                  case "image":
                    return (
                      item.src ? (
                        <img key={index} src={item.src} alt={item.alt || "Image"} />
                      ) : null
                    );
                  case "text":
                    return item.text ? <p key={index}>{item.text}</p> : null;
                  case "blockquote":
                    return item.text ? (
                      <blockquote key={index}>
                        <p>{item.text}</p>
                      </blockquote>
                    ) : null;
                  case "link":
                    return item.text ? (
                      <a key={index} href ={item.link}>{item.text}</a>
                    ) : null;
                  case "heading":
                    return item.text ? <h3 key={index}>{item.text}</h3> : null;
                  case "list":
                    return item.items && item.items.length > 0 ? (
                      <ul key={index}>
                        {item.items.map((listItem, i) => (
                          <li key={i}>{listItem}</li>
                        ))}
                      </ul>
                    ) : null;
                  case "code":
                    return item.code ? (
                      <pre key={index}>
                        <code>{item.code}</code>
                      </pre>
                    ) : null;
                  case "twitterCard":
                    return item.quote && item.source ? (
                      <TwitterCard key={index}>
                        <h4>{item.quote}</h4>
                        <span>{item.source}</span>
                        <button>Share this on Twitter</button>
                      </TwitterCard>
                    ) : null;
                  default:
                    return null;
                }
              })
            ) : (
              <p>No content available.</p>
            )}
          </Content>
  
          {/* Social Share */}
          <SocialShare>
            <span>Share</span>
            {/* LinkedIn */}
            <a data-testid="linkedin-share"
              href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(window.location.href)}`} 
              target="_blank" 
              rel="noopener noreferrer"
            >
              <FaLinkedin />
            </a>
            
            {/* Twitter */}
            <a data-testid="twitter-share"
              href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(window.location.href)}&text=${encodeURIComponent("Check out this page!")}`} 
              target="_blank" 
              rel="noopener noreferrer"
            >
              <FaXTwitter />
            </a>
          </SocialShare>
        </Container>
      </>
    );
  };
  
  export default BlogPageSection;