import Link from "next/link";
import { ArrowRight, CalendarDays, Clock3 } from "lucide-react";

import BlogVisual from "@/components/blogs/BlogVisual";
import type { BlogPost } from "@/data/blogs.data";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

export default function BlogCard({ locale, post, readMore }: { locale: Locale; post: BlogPost; readMore: string }) {
  return (
    <article className="group overflow-hidden rounded-2xl border border-[#e5eaf4] bg-white shadow-[0_8px_24px_rgba(51,66,116,0.045)] transition duration-300 hover:-translate-y-1.5 hover:border-[#d5d9ff] hover:shadow-[0_18px_34px_rgba(67,78,145,0.12)]">
      <BlogVisual label={post.visualLabel} tone={post.tone} />
      <div className="p-5">
        <span className="text-[10px] font-extrabold uppercase tracking-[0.16em] text-[#626bef]">{post.category}</span>
        <h3 className="mt-2 text-[18px] font-extrabold leading-6 tracking-[-0.035em] text-[#1c2749]">{post.title}</h3>
        <p className="mt-3 line-clamp-3 text-[13px] leading-6 text-[#748099]">{post.excerpt}</p>
        <div className="mt-4 flex flex-wrap gap-3 text-[10px] font-semibold text-[#8b96aa]">
          <span className="flex items-center gap-1.5"><CalendarDays size={13} />{post.dateLabel}</span>
          <span className="flex items-center gap-1.5"><Clock3 size={13} />{post.readTime}</span>
        </div>
        <Link href={localizedPath(locale, `/blogs/${post.slug}`)} className="mt-5 inline-flex items-center gap-2 text-[12px] font-extrabold text-[#5b65df] transition group-hover:gap-3">
          {readMore}<ArrowRight size={14} />
        </Link>
      </div>
    </article>
  );
}