import Link from "next/link";

import { Badge } from "@/components/badge";
import { Card } from "@/components/card";
import { CmsImage } from "@/components/cms-image";
import { ArrowLinkIcon } from "@/components/icon-system";
import { FadeItem } from "@/components/reveal";

type BlogCardProps = {
  title: string;
  excerpt: string;
  href: string;
  date: string;
  image?: string | null;
  tags?: string[];
};

export function BlogCard({ title, excerpt, href, date, image, tags = [] }: BlogCardProps) {
  return (
    <FadeItem>
      <Card className="flex h-full flex-col overflow-hidden p-0">
        {image ? (
          <CmsImage src={image} alt={title} className="aspect-[16/10] rounded-none" />
        ) : (
          <div className="blueprint-grid-light aspect-[16/10] bg-figma-ice p-5">
            <span className="inline-flex rounded-full bg-white/80 px-3 py-1 text-xs font-semibold text-primary">ECOM01 resurs</span>
          </div>
        )}
        <div className="flex flex-1 flex-col p-6">
        <div className="flex flex-wrap items-center gap-2">
          <Badge tone="slate">{date}</Badge>
          {tags.slice(0, 3).map((tag) => (
            <Badge key={tag} tone="blue">
              {tag}
            </Badge>
          ))}
        </div>
        <h3 className="mt-5 text-xl font-semibold leading-7 text-slate-950">{title}</h3>
        <p className="mt-3 flex-1 text-sm leading-6 text-slate-600">{excerpt}</p>
        <Link
          href={href}
          className="group/link mt-6 inline-flex min-h-10 items-center gap-2 text-sm font-semibold text-primary hover:text-primary-700"
        >
          Pročitaj tekst
          <ArrowLinkIcon />
        </Link>
        </div>
      </Card>
    </FadeItem>
  );
}