import { useLocale, useTranslations } from "next-intl";
import { Clock, ArrowLeft, ArrowRight } from "lucide-react";
import type { BlogPost } from "@/lib/blog";

export function BlogCard({ post }: { post: BlogPost }) {
  const locale = useLocale();
  const t = useTranslations("blog");
  const isRtl = locale === "fa";
  const Arrow = isRtl ? ArrowLeft : ArrowRight;
  const base = `/${locale}`;

  return (
    <article className="group flex flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm transition-all duration-200 hover:-translate-y-1 hover:shadow-md">
      {/* Cover */}
      <div className="flex h-44 items-center justify-center bg-gradient-to-br from-brand-50 to-brand-100">
        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-200/60">
          <svg viewBox="0 0 24 24" className="h-8 w-8 fill-brand-700/50" aria-hidden>
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z" />
          </svg>
        </div>
      </div>

      <div className="flex flex-1 flex-col p-5">
        {/* Category + Reading time */}
        <div className="mb-3 flex items-center justify-between">
          <span className="rounded-full bg-brand-50 px-2.5 py-0.5 text-xs font-semibold text-brand-700">
            {post.category}
          </span>
          <span className="flex items-center gap-1 text-xs text-gray-400">
            <Clock className="h-3 w-3" />
            {post.readingTime}
          </span>
        </div>

        <h3 className="mb-2 text-base font-semibold leading-snug text-gray-900 group-hover:text-brand-700 transition-colors">
          {post.title}
        </h3>
        <p className="flex-1 text-sm leading-relaxed text-gray-500 line-clamp-3">
          {post.excerpt}
        </p>

        <a
          href={`${base}/blog/${post.slug}`}
          className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-brand-700 hover:text-brand-800"
        >
          {t("readMore")}
          <Arrow className="h-3.5 w-3.5" />
        </a>
      </div>
    </article>
  );
}
