import React from "react";

import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";

import commentIcon from "../../../assets/icons/black-comment-icon.svg";

const BlogDesign3 = ({
  blogSubTitle,
  blogAuthor,
  blogComments,
  blogTitleColor,
  blogCommentAuthorTextColor,
}) => {
  return (
    <section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
      {/* title holder */}
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
          طراحی بلاگ 3
        </h2>
      </div>
      <div className="mb-6">
        <p className="leading-10">
          آدرس:
          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
            blogs/design3
          </span>
        </p>
      </div>
      {/* blog UI Design3 */}
      <div
        className="flex flex-col justify-end relative p-3"
        style={{
          backgroundImage: `url(${blogFeaturedImage2})`,
          backgroundSize: "100% 100%",
          backgroundRepeat: "no-repeat",
          // minHeight: "300px",
          height: "calc(100vh/3)",
          maxHeight: "300px",
        }}
      >
        {/* <img src={blogFeaturedImage2} alt="" /> */}
        <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
          <h2 className={`text-base text-justify ${blogTitleColor}`}>
            آیا مواد غذای پر فیبر و مفید هستند؟
          </h2>
          {blogSubTitle && (
            <h2 className={`text-base text-justify mt-2 ${blogTitleColor}`}>
              نظر شما چیه
            </h2>
          )}
          <div className="flex item-center justify-between w-full mt-4">
            {blogAuthor && (
              <div className=" flex items-center">
                <img src={blogAuthorImg} alt="" className="w-7 h-7" />
                <p
                  className={`text-xs font-light mr-2 ${blogCommentAuthorTextColor}`}
                >
                  حامد دژبانی نسب
                </p>
              </div>
            )}
            {blogComments && (
              <div className=" flex items-center">
                <p
                  className={`text-xs font-light ml-2 ${blogCommentAuthorTextColor}`}
                >
                  زمان مطالعه 30 دقیقه
                </p>
                <img src={commentIcon} alt="" className="w-7 h-7" />
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default BlogDesign3;

//different text colors i used:
// text-darkBlueTextColor2
// text-productTitle
// text-lightGrayTextColor

BlogDesign3.defaultProps = {
  blogTitleColor: "text-darkBlueTextColor2",
  blogCommentAuthorTextColor: "text-darkBlueTextColor2",

  blogSubTitle: true,
  blogAuthor: true,
  blogComments: true,
};