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

import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type LifiItem = {
  title: string;
  date: string;
  image: string;
  imageAlt?: string;
  href?: string;
  linkLabel?: string;
};

type LifiIndexProps = {
  title?: string;
  description?: string;
  ctaLabel?: string;
  ctaHref?: string;
  items?: LifiItem[];
  className?: string;
};

export default function LifiIndex({
  title,
  description,
  ctaLabel,
  ctaHref = "/lifi",
  items,
  className,
}: LifiIndexProps) {
  const t = useTranslations("lifiIndex");

  const defaultItems: LifiItem[] = [
    {
      title: t("indexTitle"),
      date: t("mockData.date"),
      image: "/images/lifi/book-cover-1.png",
      imageAlt: t("indexTitle") + " 1",
      linkLabel: t("viewIndex"),
    },
    {
      title: t("indexTitle"),
      date: t("mockData.date"),
      image: "/images/lifi/book-cover-1.png",
      imageAlt: t("indexTitle") + " 2",
      linkLabel: t("viewIndex"),
    },
    {
      title: t("indexTitle"),
      date: t("mockData.date"),
      image: "/images/lifi/book-cover-1.png",
      imageAlt: t("indexTitle") + " 3",
      linkLabel: t("viewIndex"),
    },
    {
      title: t("indexTitle"),
      date: t("mockData.date"),
      image: "/images/lifi/book-cover-1.png",
      imageAlt: t("indexTitle") + " 4",
      linkLabel: t("viewIndex"),
    },
  ];

  const displayTitle = title || t("title");
  const displayDescription = description || t("description");
  const displayCtaLabel = ctaLabel || t("ctaLabel");
  const displayItems = items || defaultItems;
  return (
    <section
      className={cn(
        "w-full bg-[#e8f1f8] 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-start">
          <div className="text-start max-w-xl space-y-3">
            <h2 className="text-3xl sm:text-[32px] md:text-[36px] lg:text-[40px] font-bold text-[#202020]">
              {displayTitle}
            </h2>
            <p className="text-[15px] sm:text-[16px] leading-[1.6] text-[#646464]">
              {displayDescription}
            </p>
          </div>
          <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
                className="rtl:rotate-180"
                src="/images/who-we-are/arrow-right.svg"
                alt=""
                width={20}
                height={20}
              />
            </Button>
          </Link>
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
          {displayItems.map((item, index) => (
            <div
              key={`${item.title}-${index}`}
              className="flex h-full flex-col items-center gap-6 rounded-[16px] border border-[#e9e9e9] bg-white p-6 shadow-[8px_13px_16px_rgba(147,147,147,0.1)]"
            >
              <div className="flex h-[200px] w-full items-center justify-center overflow-hidden rounded-[12px] bg-[#f6f8fb]">
                <img
                  src={item.image}
                  alt={item.imageAlt || item.title}
                  className="h-full w-auto object-contain"
                  loading="lazy"
                />
              </div>
              <div className="flex w-full flex-col items-start gap-2 text-start">
                <h3 className="text-[18px] sm:text-[19px] md:text-[20px] font-semibold text-[#202020] leading-[1.4]">
                  {item.title}
                </h3>
                <p className="text-[15px] sm:text-[16px] font-medium text-[#646464] leading-[1.4]">
                  {item.date}
                </p>
              </div>
              <div className="flex w-full items-center justify-start gap-2 text-[#1c75bc]">
                <span className="text-[14px] font-medium">
                  {item.linkLabel || t("viewIndex")}
                </span>
                <img
                  src="/images/hero/arrow-left.svg"
                  alt=""
                  className="size-5 rtl:rotate-180"
                  width={20}
                  height={20}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}