"use client";

import { motion } from "framer-motion";
import { Building2 } from "lucide-react";

export interface ReferenceView {
  _id: string;
  name: string;
  logoFileId: string;
  url?: string;
}

export default function References({
  references,
}: {
  references: ReferenceView[];
}) {
  if (references.length === 0) return null;

  // Duplicate the list for an infinite marquee effect
  const items = [...references, ...references];

  return (
    <section className="mt-24 lg:mt-32 overflow-hidden">
      <div className="max-w-7xl mx-auto px-6 lg:px-10 mb-8">
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-50px" }}
          transition={{ duration: 0.5 }}
          className="text-center"
        >
          <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full glass text-xs text-brand-200 mb-3">
            <Building2 className="w-3.5 h-3.5" />
            Referanslarımız
          </span>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold heading-gradient">
            Birlikte Çalıştığımız Sunucular
          </h2>
          <p className="mt-3 text-brand-300 max-w-xl mx-auto">
            Kart üzerine geldiğinizde gerçek logo renklerini görebilirsiniz.
          </p>
        </motion.div>
      </div>

      <div className="relative">
        {/* Edge fade */}
        <div className="pointer-events-none absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-[#060a13] to-transparent z-10" />
        <div className="pointer-events-none absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-[#060a13] to-transparent z-10" />

        <div className="marquee py-4">
          {items.map((r, i) => {
            const node = (
              <div
                className="shrink-0 w-32 h-32 sm:w-36 sm:h-36 mx-3 rounded-2xl glass flex items-center justify-center group transition"
                title={r.name}
              >
                <img
                  src={`/api/files/${r.logoFileId}`}
                  alt={r.name}
                  className="max-w-[70%] max-h-[70%] object-contain transition-all duration-500 grayscale brightness-50 group-hover:grayscale-0 group-hover:brightness-100 group-hover:scale-110"
                />
              </div>
            );
            return r.url ? (
              <a
                key={`${r._id}-${i}`}
                href={r.url}
                target="_blank"
                rel="noopener noreferrer"
              >
                {node}
              </a>
            ) : (
              <div key={`${r._id}-${i}`}>{node}</div>
            );
          })}
        </div>
      </div>
    </section>
  );
}