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

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

const FALLBACK_IMAGES = [
  "/images/team/member1.jpg",
  "/images/team/member2.jpg",
  "/images/team/member3.jpg",
  "/images/team/member4.jpg",
];

type OurTeamProps = {
  title?: string;
  ctaLabel?: string;
  ctaHref?: string;
  members?: TeamMember[];
  className?: string;
  showCta?: boolean;
};

export default function OurTeam({
  title,
  ctaLabel,
  ctaHref = "/our-team",
  members,
  className,
  showCta = true,
}: OurTeamProps) {
  const t = useTranslations("ourTeam");

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

  const displayMembers: TeamMember[] =
    members && members.length > 0
      ? members
      : [0, 1, 2, 3].map((i) => ({
          id: i,
          name: t("memberName"),
          email: "",
          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>
          {showCta && (
            <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-8 md:grid-cols-2 xl:grid-cols-4">
          {displayMembers.map((member, index) => {
            const imageSrc =
              member.image && member.image.startsWith("http")
                ? member.image
                : FALLBACK_IMAGES[index % 4];
            return (
              <div
                key={member.id}
                className="flex h-full flex-col items-center gap-6 text-center"
              >
                <div className="relative h-[200px] w-[200px]">
                  <div className="absolute inset-0 rounded-full border-4 border-[#f4b400] p-2">
                    <div className="h-full w-full overflow-hidden rounded-full bg-neutral-100">
                      <img
                        src={imageSrc}
                        alt={member.name}
                        className="h-full w-full object-cover"
                        loading="lazy"
                      />
                    </div>
                  </div>
                </div>
                <div className="flex flex-col gap-3">
                  <p className="text-[20px] sm:text-[21px] md:text-[22px] font-bold text-[#0c314f] leading-[1.4]">
                    {member.name}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}