import { cn } from "@/lib/utils";

export interface Param {
  name: string;
  type: string;
  required?: boolean;
  description: string;
  default?: string;
}

interface ParamTableProps {
  params: Param[];
  title?: string;
}

export function ParamTable({ params, title = "Parameters" }: ParamTableProps) {
  return (
    <div className="my-4">
      {title && <h4 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2">{title}</h4>}
      <div className="rounded-lg border overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-muted/50 border-b">
              <th className="text-left px-4 py-2.5 font-semibold">Name</th>
              <th className="text-left px-4 py-2.5 font-semibold">Type</th>
              <th className="text-left px-4 py-2.5 font-semibold">Required</th>
              <th className="text-left px-4 py-2.5 font-semibold">Description</th>
            </tr>
          </thead>
          <tbody>
            {params.map((p, i) => (
              <tr key={p.name} className={cn("border-b last:border-0", i % 2 === 0 ? "" : "bg-muted/20")}>
                <td className="px-4 py-2.5">
                  <code className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">{p.name}</code>
                </td>
                <td className="px-4 py-2.5">
                  <span className="text-xs font-mono text-blue-600 dark:text-blue-400">{p.type}</span>
                </td>
                <td className="px-4 py-2.5">
                  {p.required ? (
                    <span className="text-xs text-red-600 dark:text-red-400 font-medium">required</span>
                  ) : (
                    <span className="text-xs text-muted-foreground">
                      optional{p.default ? ` (${p.default})` : ""}
                    </span>
                  )}
                </td>
                <td className="px-4 py-2.5 text-muted-foreground">{p.description}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
