"use client";

import { Factory } from "lucide-react";
import { AnimatedCounter } from "@/components/magicui/animated-counter";
import { FadeIn } from "@/components/magicui/fade-in";
import type { StatsBarItem } from "@/data/localized-data";
import Link from "next/link";
import { useLocale } from "next-intl";

function StatsBar({ stats }: { stats: StatsBarItem[] }) {
  const locale = useLocale();

  return (
    <section className="relative z-10 flex flex-col bg-white">
      <div className="mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-8">
        <FadeIn>
          <div className="-mt-12 rounded-xl border border-gold/10 bg-white py-8 shadow-[0_8px_30px_rgb(0,0,0,0.06)] sm:-mt-16 sm:py-10 lg:-mt-20">
            <div className="grid grid-cols-1 gap-y-10 md:grid-cols-3">
              {stats.map((stat, i) => {
                const isSpecial = "isSpecial" in stat && stat.isSpecial;
                const isLast = i === stats.length - 1;
                const containerClass = `flex flex-col items-center justify-start gap-2 text-center sm:gap-3 ${!isLast ? "md:border-r md:border-gold/10" : ""
                  }`;

                const inner = (
                  <>
                    <div className="flex h-12 items-center justify-center sm:h-16">
                      {isSpecial ? (
                        <Factory className="h-10 w-10 text-gold sm:h-12 sm:w-12" strokeWidth={1} />
                      ) : (
                        <p className="font-serif text-4xl font-bold leading-none text-gold sm:text-[2.75rem]">
                          <AnimatedCounter value={stat.value} suffix={stat.suffix} />
                        </p>
                      )}
                    </div>

                    <p className="mx-auto max-w-[160px] text-[10px] font-bold uppercase leading-[1.6] tracking-[0.2em] text-zinc-800">
                      {isSpecial ? (
                        <>
                          <span className="block">{"specialText" in stat ? (stat as any).specialText : ""}</span>
                          <span className="block">{stat.label}</span>
                        </>
                      ) : (
                        stat.label
                      )}
                    </p>
                  </>
                );

                if (i === 2) {
                  return (
                    <Link
                      key={stat.label}
                      href={`/${locale}/certifications`}
                      className={`${containerClass} cursor-pointer hover:opacity-80 transition-opacity`}
                    >
                      {inner}
                    </Link>
                  );
                }

                return (
                  <div key={stat.label} className={containerClass}>
                    {inner}
                  </div>
                );
              })}
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

export { StatsBar };