import * as React from "react";
import { cn } from "@/lib/utils";
import { affiliatesTexts } from "@/lib/i18n/affiliates";
import type { ApiParam, ApiRequirement } from "@/lib/api-docs";

const texts = affiliatesTexts.api;

const REQUIREMENT_LABEL: Record<ApiRequirement, string> = {
  required: texts.required,
  optional: texts.optional,
  conditional: texts.conditional,
};

const REQUIREMENT_STYLE: Record<ApiRequirement, string> = {
  required:
    "bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400",
  optional:
    "bg-slate-100 text-slate-600 dark:bg-slate-500/15 dark:text-slate-300",
  conditional:
    "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400",
};

export function ParamTable({
  params,
  className,
}: {
  params: ApiParam[];
  className?: string;
}) {
  if (params.length === 0) return null;

  return (
    <div className={cn("overflow-x-auto rounded-xl border", className)}>
      <table className="w-full min-w-[560px] text-sm">
        <thead>
          <tr className="border-b bg-muted/40 text-left">
            <th className="px-3 py-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase">
              {texts.paramColumn}
            </th>
            <th className="px-3 py-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase">
              {texts.typeColumn}
            </th>
            <th className="px-3 py-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase">
              {texts.requiredColumn}
            </th>
            <th className="px-3 py-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase">
              {texts.descriptionColumn}
            </th>
          </tr>
        </thead>
        <tbody>
          {params.map((p) => (
            <tr key={p.name} className="border-b last:border-0 align-top">
              <td className="px-3 py-2.5 font-mono text-[13px] font-medium whitespace-nowrap">
                {p.name}
              </td>
              <td className="px-3 py-2.5 font-mono text-xs text-muted-foreground whitespace-nowrap">
                {p.type}
              </td>
              <td className="px-3 py-2.5">
                <span
                  className={cn(
                    "inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium whitespace-nowrap",
                    REQUIREMENT_STYLE[p.requirement],
                  )}
                >
                  {REQUIREMENT_LABEL[p.requirement]}
                </span>
              </td>
              <td className="px-3 py-2.5 text-muted-foreground">{p.description}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ParamTable;