import Image from "next/image";
import Link from "next/link";
import { BlogPost } from "@/data/blog/blog";

interface BlogCardProps {
  post: BlogPost;
}

export default function BlogCard({ post }: BlogCardProps) {
  return (
    <div
      className="blog-card"
      data-aos="fade-up"
      data-aos-duration={900}
      data-aos-delay={post.delay}
    >
      <div className="blog-img">
        <Link href={post.url} title="">
          <Image src={post.image} alt={post.title} width={400} height={250} />
        </Link>
      </div>
      <div className="blog-content">
        <ul className="blog-meta">
          <li>
            <span>{post.author}</span>
          </li>
          <li>
            <span>{post.date}</span>
          </li>
        </ul>
        <h3 className="title">
          <Link href={post.url} title="">
            {post.title}
          </Link>
        </h3>
        <Link href={post.url} className="btn-style1">
          Read More
          <span>
            <Image
              src="/assets/images/icon/arrow.svg"
              alt="Arrow Icon"
              width={18}
              height={18}
            />
          </span>
        </Link>
      </div>
    </div>
  );
}