<script setup>
import { t } from "../i18n";

defineProps({
  title: String,
  auth: String,
  endpoints: Array, // [{ method, path, desc }]
  note: String, // optional line under the header, e.g. what a {placeholder} stands for
});

const methodClass = {
  GET: "text-success",
  POST: "text-brandtext",
  PUT: "text-info",
  PATCH: "text-warning",
  DELETE: "text-danger",
};
</script>

<template>
  <div class="dh-card overflow-hidden">
    <div class="border-b border-subtle px-5 py-4">
      <div class="flex items-center justify-between">
        <div class="text-base font-bold tracking-[-0.02em] text-strong">{{ title }}</div>
        <span class="eyebrow">{{ auth }}</span>
      </div>
      <p v-if="note" class="mt-1.5 text-xs text-muted">{{ note }}</p>
    </div>
    <!-- The longest paths (the per-charger OCPP control routes) outrun a narrow
         window, so the table scrolls inside the card rather than being clipped. -->
    <div class="overflow-x-auto">
      <table class="w-full text-left text-sm">
        <thead>
          <tr class="[&>th]:eyebrow [&>th]:px-5 [&>th]:py-2.5 [&>th]:font-medium">
            <th>{{ t("api.colEndpoint") }}</th>
            <th>{{ t("api.colDescription") }}</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="e in endpoints"
            :key="e.method + e.path"
            class="transition-colors hover:bg-sunken"
          >
            <td class="data border-t border-subtle px-5 py-2.5 text-xs whitespace-nowrap">
              <span class="font-semibold" :class="methodClass[e.method]">{{ e.method }}</span>
              <span class="text-strong"> {{ e.path }}</span>
            </td>
            <td class="border-t border-subtle px-5 py-2.5 text-body">{{ e.desc }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
