/* eslint-disable @next/next/no-img-element */
"use client";

import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing";
import type { BlogItem } from "@/lib/website-types";
import { stripHtml } from "@/lib/website-types";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";

const FALLBACK_IMAGES = [
  "/images/blogs/blog1.jpg",
  "/images/blogs/blog2.jpg",
  "/images/blogs/blog3.jpg",
];

type OurBlogsProps = {
  title?: string;
  ctaLabel?: string;
  ctaHref?: string;
  blogs?: BlogItem[];
  className?: string;
};

export default function OurBlogs({
  title,
  ctaLabel,
  ctaHref = "/blogs",
  blogs,
  className,
}: OurBlogsProps) {
  const t = useTranslations("ourBlogs");

  const displayTitle = title ?? t("title");
  const displayCtaLabel = ctaLabel ?? t("ctaLabel");

  const displayBlogs: BlogItem[] =
    blogs && blogs.length > 0
      ? blogs
      : [0, 1, 2].map((i) => ({
          id: i,
          title: t("blogTitle"),
          description: t("blogDescription"),
          image: FALLBACK_IMAGES[i],
          created_at: "",
        }));

  return (
    <section
      className={cn(
        "w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-[120px] py-14 sm:py-16 md:py-20",
        className
      )}
    >
      <div className="mx-auto flex max-w-[1280px] flex-col gap-10">
        <div className="flex flex-col gap-4 items-start justify-between md:flex-row md:items-center">
          <h2 className="text-3xl sm:text-[32px] md:text-[36px] lg:text-[40px] font-bold text-foreground">
            {displayTitle}
          </h2>
          <Link href={ctaHref} className="self-start">
            <Button className="h-12 rounded-[12px] border border-white bg-[#1c75bc] px-6 text-base font-semibold text-white hover:bg-[#1c75bc]/90 gap-2">
              {displayCtaLabel}
              <img
                src="/images/who-we-are/arrow-right.svg"
                alt=""
                className="rtl:rotate-180"
                width={20}
                height={20}
              />
            </Button>
          </Link>
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
          {displayBlogs.map((blog, idx) => {
            const imageSrc = blog.image ?? FALLBACK_IMAGES[idx % 3];
            const excerpt = stripHtml(blog.description).slice(0, 160);
            return (
              <Link
                key={blog.id}
                href={`/blogs/${blog.id}`}
                className="flex h-full flex-col gap-6 rounded-[16px] border border-border bg-white p-6 shadow-[8px_13px_16px_rgba(147,147,147,0.1)] hover:shadow-[8px_13px_24px_rgba(147,147,147,0.15)] transition-shadow"
              >
                <div className="relative h-[234px] w-full overflow-hidden rounded-[8px] bg-[#efefef]">
                  <img
                    src={imageSrc}
                    alt={blog.title}
                    className="h-full w-full object-cover"
                    loading="lazy"
                  />
                </div>
                <div className="flex flex-col gap-6 text-start">
                  <div className="space-y-3">
                    <p className="text-[17px] sm:text-[18px] font-bold leading-[1.4] text-[#0c314f]">
                      {blog.title}
                    </p>
                    <p className="text-[14px] leading-[1.6] text-muted-foreground line-clamp-3">
                      {excerpt}
                    </p>
                  </div>
                  <div className="flex items-center justify-start gap-2 text-[#1c75bc]">
                    <span className="text-[14px] font-medium">
                      {t("readMore")}
                    </span>
                    <img
                      src="/images/blogs/arrow-left.svg"
                      alt=""
                      className="size-4 ltr:rotate-180"
                      width={16}
                      height={16}
                    />
                  </div>
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}