// eslint-disable-next-line no-use-before-define
import React from "react";
import { Container, Row, Col } from "reactstrap";
import "./Blog.css";
import bI from "../../../assets/img/blog/BlogImages/hydrophone.jpeg";
import { Link } from "react-router-dom";

/* eslint-disable react/prop-types */
function Blog(props) {
  const topath = "/blogs/" + props.id;
  console.log(topath);
  return (
    <>
      <div className="section blog-card">
        <div className="blog-content">
          <h1 className="blog-heading" style={{ fontSize: "3.4rem" }}>{props.heading}</h1>
          <div className="subheading-container">
            <h3 className="blog-author" style={{ fontSize: "1.8rem" }}>{props.author}</h3>
            <h3 className="blog-date" style={{ fontSize: "1.8rem" }}>{props.date}</h3>
          </div>
          <Row>
            <Col lg="6">
              <img
                src={require("assets/img/blog/BlogImages/" + props.bannerImage)}
                className="blog-banner-image"
              ></img>
            </Col>
            <Col style={{ display: "flex" }} lg="6">
              <p className="blogs-description">
                {props.abstract}
                <Link to={topath} className="blogs-more-button">
                  Read More
                </Link>
              </p>
            </Col>
          </Row>
        </div>
      </div>
    </>
  );
}

export default Blog;