import Link from "next/link";
import { ArrowLeft, 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 BlogArticleHero({ copy, locale, post }: { copy: BlogPageCopy; locale: Locale; post: BlogPost }) {
  return (
    <header className="relative overflow-hidden border-b border-[#edf0f7] bg-white">
      <div className="pointer-events-none absolute -left-20 top-0 h-72 w-72 rounded-full bg-[#eef0ff] blur-3xl" />
      <div className="pointer-events-none absolute right-0 top-20 h-72 w-72 rounded-full bg-[#edfbff] blur-3xl" />
      <div className="relative mx-auto max-w-[1060px] px-6 py-14 sm:py-16">
        <Link href={localizedPath(locale, "/blogs")} className="inline-flex items-center gap-2 text-[12px] font-extrabold text-[#616be4] transition hover:gap-3"><ArrowLeft size={15} />{copy.backToBlogs}</Link>
        <p className="mt-7 text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#626bef]">{post.category}</p>
        <h1 className="mt-3 max-w-[950px] text-4xl font-extrabold leading-[1.1] tracking-[-0.06em] text-[#101a3c] sm:text-6xl">{post.title}</h1>
        <p className="mt-5 max-w-[850px] text-[16px] leading-8 text-[#6d7895]">{post.excerpt}</p>
        <div className="mt-6 flex flex-wrap gap-4 text-[11px] font-semibold text-[#8995aa]">
          <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>
        <div className="mt-8"><BlogVisual large label={post.visualLabel} tone={post.tone} /></div>
      </div>
    </header>
  );
}