import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "../Heading/Heading";
import blog1 from "./Img/blog1.jpg";
const blog = [
  {
    date: "March 10, 2021",
    title: "Here is your title",
    discription: (
      <>
        Magnam incidunt necessitatibus placeat accusamus porro id deserunt
        facilis deleniti rerum tenetur? Enim, fugit rerum nobis quisquam nihil
        magni veniam aliquid maiores.Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Magnam incidunt necessitatibus placeat accusamus porro
        id deserunt facilis deleniti rerum tenetur? Enim, fugit rerum nobis
        quisquam nihil magni veniam aliquid maiores.Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Magnam incidunt necessitatibus placeat
        accusamus porro id deserunt facilis deleniti rerum tenetur? Enim, fugit
        rerum nobis quisquam nihil magni veniam aliquid maiores.
      </>
    ),
  },
  {
    date: "March 10, 2021",
    title: "Here is your title",
    discription: (
      <>
        Magnam incidunt necessitatibus placeat accusamus porro id deserunt
        facilis deleniti rerum tenetur? Enim, fugit rerum nobis quisquam nihil
        magni veniam aliquid maiores.Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Magnam incidunt necessitatibus placeat accusamus porro
        id deserunt facilis deleniti rerum tenetur? Enim, fugit rerum nobis
        quisquam nihil magni veniam aliquid maiores.Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Magnam incidunt necessitatibus placeat
        accusamus porro id deserunt facilis deleniti rerum tenetur? Enim, fugit
        rerum nobis quisquam nihil magni veniam aliquid maiores.
      </>
    ),
  },
  {
    date: "March 10, 2021",
    title: "Here is your title",
    discription: (
      <>
        Magnam incidunt necessitatibus placeat accusamus porro id deserunt
        facilis deleniti rerum tenetur? Enim, fugit rerum nobis quisquam nihil
        magni veniam aliquid maiores.Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Magnam incidunt necessitatibus placeat accusamus porro
        id deserunt facilis deleniti rerum tenetur? Enim, fugit rerum nobis
        quisquam nihil magni veniam aliquid maiores.Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Magnam incidunt necessitatibus placeat
        accusamus porro id deserunt facilis deleniti rerum tenetur? Enim, fugit
        rerum nobis quisquam nihil magni veniam aliquid maiores.
      </>
    ),
  },
];
export default function DetailedBlog() {
  return (
    <>
      <Container style={{ paddingTop: "150px" }}>
        <Row className=" justify-content-center">
          {blog.map((post) => {
            return (
              <>
                <Col lg={10} className="mb-5">
                  <div
                    style={{
                      borderRadius: "10px",
                      paddingTop: "80px",
                      backgroundImage: `url(${blog1}) `,
                      backgroundPosition: "bottom",
                      backgroundSize: "cover",
                      maxWidth: "100%",
                      height: "400px",
                      backgroundRepeat: "no-repeat",
                    }}
                  />
                  <div className="pt-2">
                    <Heading
                      title={post.date}
                      fontFamily="light"
                      fontSize="18px"
                      color="#C1C1C1"
                    />
                    <Heading
                      className="pt-2"
                      title={post.title}
                      fontSize="30px"
                      fontFamily="semibold"
                    />
                    <p style={{ fontFamily: "light" }}>{post.discription}</p>
                  </div>
                </Col>
              </>
            );
          })}
        </Row>
      </Container>
    </>
  );
}
