import Image from "next/image";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import {
  blogUrl,
  formatPersianDate,
  type Blog,
} from "@/lib/meshkee";

export function ApiBlogCard({ blog }: { blog: Blog }) {
  const href = blogUrl(blog);

  return (
    <article className="blog-list-card">
      <Link className="blog-list-image" href={href}>
        <Image
          src={blog.titleImageUrl || "/images/articles/decorative-mirrors.jpg"}
          alt={blog.title}
          fill
          sizes="(max-width: 680px) 100vw, (max-width: 1050px) 50vw, 33vw"
        />
      </Link>
      <div className="blog-list-copy">
        <span>{formatPersianDate(blog.publishedAt)}</span>
        <h2><Link href={href}>{blog.title}</Link></h2>
        <p>{blog.abstract}</p>
        <Link href={href}>
          مطالعه مقاله
          <ArrowLeft />
        </Link>
      </div>
    </article>
  );
}