"use client";

import { useProfile } from "../context/ProfileContext";

export function Affiliates() {
  const { affiliates } = useProfile();

  if (affiliates.length === 0) return null;

  return (
    <section className="w-full max-w-5xl mx-auto space-y-6 px-4 sm:space-y-8">
      <div className="text-center space-y-4">
        <h2 className="text-2xl font-semibold text-white sm:text-3xl">Affiliates</h2>
        <p className="mx-auto max-w-2xl text-sm text-gray-500 sm:text-base">
          Hosting and services I actually use and recommend.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 sm:gap-5">
        {affiliates.map((affiliate) => (
          <a
            key={affiliate.id}
            href={affiliate.link}
            target="_blank"
            rel="noopener noreferrer"
            className="w-full rounded-xl border border-white/10 bg-white/[0.03] p-4 transition-all duration-300 hover:border-white/25 hover:bg-white/[0.06]"
          >
            <div className="mb-3 flex flex-col items-center gap-2 text-center">
              {affiliate.icon ? (
                <img
                  src={affiliate.icon}
                  alt={affiliate.name}
                  className="h-7 w-auto max-w-[130px] rounded object-contain"
                />
              ) : null}
              <div>
                <h3 className="text-lg font-semibold text-white">{affiliate.name}</h3>
                <p className="mt-1 text-[10px] font-medium uppercase leading-none tracking-widest text-gray-500">
                  {affiliate.location}
                </p>
              </div>
            </div>

            <div className="space-y-3">
              {affiliate.provides.length > 0 ? (
                <div>
                  <p className="mb-1.5 text-xs font-semibold text-gray-400">Provides</p>
                  <div className="flex flex-wrap gap-2">
                    {affiliate.provides.map((item) => (
                      <span
                        key={item}
                        className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-gray-300"
                      >
                        {item}
                      </span>
                    ))}
                  </div>
                </div>
              ) : null}
              {affiliate.good.length > 0 ? (
                <div>
                  <p className="mb-1.5 text-xs font-semibold text-emerald-300">Good</p>
                  <div className="flex flex-wrap gap-2">
                    {affiliate.good.map((item) => (
                      <span
                        key={item}
                        className="inline-flex items-center gap-1.5 rounded-full border border-emerald-400/30 bg-emerald-500/10 px-2.5 py-1 text-xs text-emerald-200"
                      >
                        <span className="font-bold">+</span>
                        {item}
                      </span>
                    ))}
                  </div>
                </div>
              ) : null}
              {affiliate.bad.length > 0 ? (
                <div>
                  <p className="mb-1.5 text-xs font-semibold text-rose-300">Bad</p>
                  <div className="flex flex-wrap gap-2">
                    {affiliate.bad.map((item) => (
                      <span
                        key={item}
                        className="inline-flex items-center gap-1.5 rounded-full border border-rose-400/30 bg-rose-500/10 px-2.5 py-1 text-xs text-rose-200"
                      >
                        <span className="font-bold">-</span>
                        {item}
                      </span>
                    ))}
                  </div>
                </div>
              ) : null}
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}
