import Image from "next/image";
import Link from "next/link";
import { blogHref, formatFaDate } from "@/lib/format";
import type { Blog } from "@/lib/types";

export function BlogCard({ blog }: { blog: Blog }) {
  const href = blogHref(blog);
  const date = formatFaDate(blog.publishedAt || blog.createdAt);

  return (
    <article className="flex h-full flex-col overflow-hidden bg-white shadow-[0_12px_40px_rgba(0,0,0,0.06)]">
      <Link href={href} className="relative block aspect-[16/10] bg-[#eee]">
        {blog.titleImageUrl ? (
          <Image
            src={blog.titleImageUrl}
            alt={blog.title}
            fill
            className="object-cover"
            sizes="(max-width:768px) 100vw, 33vw"
          />
        ) : (
          <div className="flex h-full items-center justify-center text-sm text-muted">
            بدون تصویر
          </div>
        )}
      </Link>
      <div className="flex flex-1 flex-col p-6">
        {date && (
          <time className="mb-2 block text-xs text-[#A0A0A0]">{date}</time>
        )}
        <h3 className="mb-3 text-base font-semibold leading-7 text-dark">
          <Link href={href} className="transition hover:text-primary">
            {blog.title}
          </Link>
        </h3>
        {blog.abstract && (
          <p className="mb-5 line-clamp-3 flex-1 text-sm leading-7 text-muted text-justify">
            {blog.abstract}
          </p>
        )}
        <Link
          href={href}
          className="text-sm font-medium text-dark underline underline-offset-4 transition hover:text-primary"
        >
          بیشتر بخوانید
        </Link>
      </div>
    </article>
  );
}