"use client";

import React from "react";
import "./Blog_card.css";
import parse from "html-react-parser";
import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";

function Blog_card({ baseLink, blogData }) {
  return (
    <Link href={baseLink} className="blog_card_link">
      <article className="Blog_card">
        {/* Image */}
        <div className="img_holder">
          <img
            className="Blog_img"
            src={process.env.NEXT_PUBLIC_IMG_URL + blogData.image}
            alt={blogData.name || "Blog"}
          />

          <div className="image_gradient"></div>

          <div className="blog_content">
            {blogData.subname && (
              <p className="blog_category">{blogData.subname}</p>
            )}

            <h3 className="title_text">{blogData.name}</h3>

            <div className="para_text">
              {parse(
                typeof blogData?.description === "string"
                  ? blogData.description
                  : "",
              )}
            </div>

            <div className="read_more">
              <span>Read More</span>

              <FontAwesomeIcon icon={faArrowRight} />
            </div>
          </div>
        </div>
      </article>
    </Link>
  );
}

export default Blog_card;
