import BlogImage from "@/assets/images/blog-image.png";
import { ArrowLeft } from "iconsax-reactjs";
import Image from "next/image";
import { FC } from "react";

const BlogCard: FC = () => {
  return (
    <div className="bg-white shadow-[0_4px_20px_rgba(0,0,0,0.1)] p-4 rounded-3xl">
      <Image src={BlogImage} alt="Blog Image" width={1000} height={1000} className="w-full h-auto rounded-2xl" />
      <div className="mt-4 text-[13px] text-[#A7ADB3] font-bold">۰۴ تیر ۱۴۰۵</div>
      <div className="mt-2 font-bold">راهنمای انتخاب بنر مناسب</div>
      <p className="mt-2 text-sm text-[#67727C]">با انواع بنر، کاربردها و نکات مهم انتخاب آشنا شوید تا بهترین گزینه را متناسب با نیاز و بودجه خود انتخاب کنید.</p>
      <div className="mt-2 flex items-center gap-2 text-primary">
        <div className="text-xs font-bold">مشاهده</div>
        <ArrowLeft size={16} color="currentColor" className="mt-px" />
      </div>
    </div>
  );
};

export default BlogCard;