import { IconArrowRight, IconCalendar } from "@tabler/icons-react";
import Image from "next/image";
import { Link } from "@/i18n/navigation";

interface BlogCardProps {
  category: string;
  categorySlug: string;
  date: string;
  description: string;
  headingLevel?: "h2" | "h3";
  image?: string;
  locale: string;
  priority?: boolean;
  slug: string;
  title: string;
}

const readMoreLabels: Record<string, string> = {
  fr: "Lire la suite",
  en: "Read more",
};

export default function BlogCard({
  title,
  description,
  date,
  slug,
  category,
  categorySlug,
  image,
  locale,
  headingLevel = "h2",
  priority = false,
}: BlogCardProps) {
  const Heading = headingLevel;
  const formattedDate = new Intl.DateTimeFormat(locale, {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(new Date(date));

  return (
    <article className="group overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-[#000] to-[#1A2428] transition-all duration-300 hover:border-[#fd105e]/30 hover:shadow-[#fd105e]/5 hover:shadow-lg">
      <Link
        className="block overflow-hidden"
        href={`/blog/${categorySlug}/${slug}`}
      >
        <Image
          alt={title}
          className="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-105"
          height={400}
          priority={priority}
          sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
          src={image || "/blog/placeholder.webp"}
          width={720}
        />
      </Link>
      <div className="flex flex-col gap-4 p-6">
        <div className="flex items-center gap-3">
          <Link
            className="inline-block rounded-full bg-[#fd105e]/10 px-3 py-1 font-semibold text-[#fd105e] text-xs transition-colors hover:bg-[#fd105e]/20"
            href={`/blog/${categorySlug}`}
          >
            {category}
          </Link>
          <span className="flex items-center gap-1.5 text-neutral-400 text-xs">
            <IconCalendar size={14} stroke={1.5} />
            {formattedDate}
          </span>
        </div>

        <Link className="block" href={`/blog/${categorySlug}/${slug}`}>
          <Heading className="font-bold text-white text-xl leading-tight transition-colors duration-200 group-hover:text-[#fd105e]">
            {title}
          </Heading>
        </Link>

        <p className="line-clamp-3 text-neutral-300 text-sm leading-relaxed">
          {description}
        </p>

        <Link
          className="mt-auto inline-flex items-center gap-1.5 font-medium text-[#fd105e] text-sm transition-colors duration-200 hover:text-[#fd105e]/80"
          href={`/blog/${categorySlug}/${slug}`}
        >
          {readMoreLabels[locale] || readMoreLabels.en}
          <IconArrowRight
            className="transition-transform duration-200 group-hover:translate-x-1"
            size={16}
            stroke={2}
          />
        </Link>
      </div>
    </article>
  );
}