import Image from "next/image";
import Link from "next/link";
import { detonexFigmaAssets } from "@/lib/detonex-figma";
import { formatBlogDate } from "@/lib/format-blog-date";
import type { StorefrontBlogPostCard } from "@/types/storefront";

export function BlogCard({ post }: { post: StorefrontBlogPostCard }) {
  return (
    <article className="group flex flex-col gap-4">
      <Link href={post.href} className="block">
        <div className="relative aspect-[1920/1080] overflow-hidden rounded-[8px] bg-[#d9d9d9]">
          {post.image ? (
            <Image
              src={post.image.src}
              alt={post.image.alt || post.title}
              fill
              sizes="(max-width: 767px) 100vw, (max-width: 1279px) 50vw, 33vw"
              className="object-cover transition-transform duration-300 group-hover:scale-[1.03]"
            />
          ) : null}
        </div>
      </Link>
      <div className="space-y-3">
        <div className="flex items-center justify-between gap-4">
          <span className="inline-flex rounded-[4px] bg-accent/10 px-[10px] py-1 text-[12px] font-semibold uppercase tracking-[-0.01em] text-accent/60">
            {post.category?.name || "Blog"}
          </span>
          <p className="text-[14px] font-medium tracking-[-0.02em] text-primary/60">
            {post.publishedAt ? formatBlogDate(post.publishedAt) : ""}
          </p>
        </div>
        <Link href={post.href} className="block space-y-2">
          <h3 className="text-[20px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
            {post.title}
          </h3>
          {post.excerpt ? (
            <p className="line-clamp-3 text-[16px] font-medium leading-6 tracking-[-0.02em] text-primary/60">
              {post.excerpt}
            </p>
          ) : null}
        </Link>
        <Link
          href={post.href}
          className="inline-flex items-center gap-1.5 text-[16px] font-medium tracking-[-0.02em] text-accent hover:text-accent [&_span]:text-accent"
        >
          <span>Saznaj više</span>
          <Image
            src={detonexFigmaAssets.icons.blogArrow}
            alt=""
            width={16}
            height={16}
            className="size-4"
          />
        </Link>
      </div>
    </article>
  );
}