import { BlurImage } from "@/components/blog/blur-image";
import { truncate } from "@/lib/utils";
import { Blog } from "content-collections";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import Image from "next/image";
import Link from "next/link";
import Balancer from "react-wrap-balancer";
import { Logo } from "../logo";

const CATEGORY_LABELS: Record<string, string> = {
  actualites: "Actualités",
  guides: "Guides",
  reglementation: "Réglementation",
  "cas-clients": "Cas clients",
};

interface BlogCardProps {
  blog: Blog & { href?: string };
}

export const BlogCard = ({ blog }: BlogCardProps) => {
  const href = blog.href || `/${blog.category}/${blog.slug}`;

  return (
    <Link
      className="shadow-lg grid grid-cols-1 md:grid-cols-2 rounded-3xl group border border-transparent hover:border-gray-200 w-full hover:bg-gray-50 overflow-hidden hover:scale-[1.02] transition duration-200"
      href={href}
    >
      <div className="relative h-64 md:h-96">
        {blog.image ? (
          <BlurImage
            src={blog.image || ""}
            alt={blog.title}
            fill
            sizes="(max-width: 768px) 100vw, 50vw"
            className="object-cover object-top rounded-3xl"
          />
        ) : (
          <div className="h-full flex items-center justify-center group-hover:bg-gray-50">
            <Logo />
          </div>
        )}
      </div>
      <div className="p-4 md:p-8 group-hover:bg-gray-50 flex flex-col justify-between">
        <div>
          <div className="flex gap-4 flex-wrap mb-4">
            <span className="text-xs font-bold text-orange-700 px-3 py-1.5 rounded-full bg-orange-100">
              {CATEGORY_LABELS[blog.category] || blog.category}
            </span>
          </div>
          <p className="text-lg md:text-4xl font-bold mb-4 text-gray-900">
            <Balancer>{blog.title}</Balancer>
          </p>
          <p className="text-left text-base md:text-xl mt-2 text-gray-600">
            {truncate(blog.description, 500)}
          </p>
        </div>
        <div className="flex space-x-2 items-center mt-6">
          <Image
            src={blog.authorAvatar}
            alt={blog.author}
            width={40}
            height={40}
            className="rounded-full h-6 w-6 md:h-10 md:w-10"
          />
          <p className="text-sm font-normal text-gray-600">{blog.author}</p>
          <div className="h-1 w-1 bg-gray-400 rounded-full"></div>
          <p className="text-gray-600 text-sm max-w-xl group-hover:text-gray-900 transition duration-200">
            {format(new Date(blog.date), "d MMMM yyyy", { locale: fr })}
          </p>
        </div>
      </div>
    </Link>
  );
};

export const BlogCardVertical = ({ blog }: BlogCardProps) => {
  const href = blog.href || `/${blog.category}/${blog.slug}`;

  return (
    <Link
      className="shadow-lg rounded-3xl group border border-transparent hover:border-gray-200 w-full hover:bg-gray-50 overflow-hidden hover:scale-[1.02] transition duration-200"
      href={href}
    >
      <div className="relative h-64 md:h-96">
        {blog.image ? (
          <BlurImage
            src={blog.image || ""}
            alt={blog.title}
            fill
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            className="object-cover object-top rounded-3xl"
          />
        ) : (
          <div className="h-full flex items-center justify-center group-hover:bg-gray-50">
            <Logo />
          </div>
        )}
      </div>
      <div className="p-4 md:p-8 group-hover:bg-gray-50 flex flex-col justify-between">
        <div>
          <div className="flex gap-4 flex-wrap mb-4">
            <span className="text-xs font-bold text-orange-700 px-3 py-1.5 rounded-full bg-orange-100">
              {CATEGORY_LABELS[blog.category] || blog.category}
            </span>
          </div>
          <p className="text-lg md:text-xl font-bold mb-4 text-gray-900">
            <Balancer>{blog.title}</Balancer>
          </p>
          <p className="text-left text-sm md:text-base mt-2 text-gray-600">
            {truncate(blog.description, 200)}
          </p>
        </div>
        <div className="flex space-x-2 items-center mt-6">
          <Image
            src={blog.authorAvatar}
            alt={blog.author}
            width={40}
            height={40}
            className="rounded-full h-6 w-6 md:h-10 md:w-10"
          />
          <p className="text-sm font-normal text-gray-600">{blog.author}</p>
          <div className="h-1 w-1 bg-gray-400 rounded-full"></div>
          <p className="text-gray-600 text-sm max-w-xl group-hover:text-gray-900 transition duration-200">
            {format(new Date(blog.date), "d MMMM yyyy", { locale: fr })}
          </p>
        </div>
      </div>
    </Link>
  );
};