/* 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";
import { SectionUnderline } from "../ui/section-underline";

type WorkItem = {
  title: string;
  description: string;
  image: string;
  imageAlt?: string;
};

type OurWorksProps = {
  title?: string;
  ctaLabel?: string;
  ctaHref?: string;
  works?: WorkItem[];
  className?: string;
};

export default function OurWorks({
  title,
  ctaLabel,
  ctaHref = "/our-work",
  works,
  className,
}: OurWorksProps) {
  const t = useTranslations("ourWorks");

  const defaultWorks: WorkItem[] = [
    {
      title: t("workTitle"),
      description: t("workDescription"),
      image: "/images/works/work1.jpg",
      imageAlt: t("workTitle") + " 1",
    },
    {
      title: t("workTitle"),
      description: t("workDescription"),
      image: "/images/works/work2.jpg",
      imageAlt: t("workTitle") + " 2",
    },
    {
      title: t("workTitle"),
      description: t("workDescription"),
      image: "/images/works/work3.jpg",
      imageAlt: t("workTitle") + " 3",
    },
  ];

  const displayTitle = title || t("title");
  const displayCtaLabel = ctaLabel || t("ctaLabel");
  const displayWorks = works || defaultWorks;

  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 items-center gap-10 text-start">

        <div className="flex flex-col items-center gap-2">
          <h2 className="text-3xl sm:text-[32px] md:text-[36px] lg:text-[40px] font-bold text-foreground">
            {displayTitle}
          </h2>
          <SectionUnderline className="w-[220px]" />
        </div>

        <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
          {displayWorks.map((work, index) => (
            <div
              key={`${work.title}-${index}`}
              className="flex flex-col items-center"
            >
              <div className="h-[400px] w-full overflow-hidden rounded-[16px] border border-border shadow-[8px_13px_16px_rgba(147,147,147,0.1)]">
                <img
                  src={work.image}
                  alt={work.imageAlt || work.title}
                  className="h-full w-full object-cover"
                  loading="lazy"
                />
              </div>
              <div className="-mt-10 w-[92%] rounded-[16px] border border-[#ebf1fb] bg-white p-6 text-center shadow-[8px_13px_16px_rgba(147,147,147,0.1)]">
                <h3 className="text-[18px] sm:text-[19px] md:text-[20px] font-bold text-foreground leading-[1.4]">
                  {work.title}
                </h3>
                <p className="mt-3 text-[15px] sm:text-[16px] leading-[1.6] text-muted-foreground">
                  {work.description}
                </p>
              </div>
            </div>
          ))}
        </div>

        <Link href={ctaHref} className="flex justify-center">
          <Button className="h-12 rounded-[12px] border border-white bg-[#1c75bc] px-6 text-base font-semibold text-white hover:bg-[#1c75bc]/90">
            {displayCtaLabel}
          </Button>
        </Link>
      </div>
    </section>
  );
}