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

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

export default function FeaturedBlog({ copy, locale, post }: { copy: BlogPageCopy; locale: Locale; post: BlogPost }) {
  return (
    <section className="mx-auto max-w-[1360px] px-6 py-14 xl:px-8">
      <p className="text-[11px] font-extrabold uppercase tracking-[0.2em] text-[#278d61]">{copy.featured}</p>
      <article className="mt-4 grid overflow-hidden rounded-[28px] border border-[#e3e8f3] bg-white shadow-[0_18px_44px_rgba(51,66,116,0.08)] lg:grid-cols-[0.95fr_1.05fr]">
        <BlogVisual large label={post.visualLabel} tone={post.tone} />
        <div className="flex flex-col justify-center p-6 sm:p-8">
          <span className="text-[11px] font-extrabold uppercase tracking-[0.16em] text-[#626bef]">{post.category}</span>
          <h2 className="mt-3 text-3xl font-extrabold leading-[1.16] tracking-[-0.05em] text-[#1b2648]">{post.title}</h2>
          <p className="mt-4 text-[14px] leading-7 text-[#748099]">{post.excerpt}</p>
          <div className="mt-5 flex flex-wrap gap-4 text-[11px] font-semibold text-[#8b96aa]">
            <span className="flex items-center gap-1.5"><UserRound size={14} />{post.author}</span>
            <span className="flex items-center gap-1.5"><CalendarDays size={14} />{post.dateLabel}</span>
            <span className="flex items-center gap-1.5"><Clock3 size={14} />{post.readTime}</span>
          </div>
          <Link href={localizedPath(locale, `/blogs/${post.slug}`)} className="mt-6 inline-flex w-fit items-center gap-2 rounded-lg bg-gradient-to-r from-[#5264ee] to-[#7756eb] px-5 py-3 text-[12px] font-bold text-white shadow-[0_8px_18px_rgba(93,91,238,0.2)] transition hover:-translate-y-0.5">
            {copy.readMore}<ArrowRight size={15} />
          </Link>
        </div>
      </article>
    </section>
  );
}