frontend/src/components/admin/PlansTable.jsx

// frontend/src/components/admin/PlansTable.jsx
import React from "react";

export default function PlansTable({ plans, isLoading, onEdit, onDelete }) {
  if (isLoading) {
    return (
      <p className="text-sm text-stone-500">
        Loading plans…
      </p>
    );
  }

  if (!plans || plans.length === 0) {
    return (
      <p className="text-sm text-stone-500">
        No membership plans created yet. Click &quot;New Plan&quot; to add one.
      </p>
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className="min-w-full text-left text-xs">
        <thead>
          <tr className="border-b border-stone-100 text-[11px] uppercase tracking-wide text-stone-500">
            <th className="py-2 pr-4">Name</th>
            <th className="py-2 pr-4">Billing</th>
            <th className="py-2 pr-4">Price</th>
            <th className="py-2 pr-4">Max Students</th>
            <th className="py-2 pr-4">Default</th>
            <th className="py-2 pr-4">Active</th>
            <th className="py-2 pr-4 text-right">Actions</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-stone-100">
          {plans.map((plan) => (
            <tr key={plan.id} className="text-[13px] text-stone-800">
              <td className="py-2 pr-4">{plan.name}</td>
              <td className="py-2 pr-4 capitalize">
                {plan.billing_period}
              </td>
              <td className="py-2 pr-4">
                ${Number(plan.price || 0).toFixed(2)}
              </td>
              <td className="py-2 pr-4">
                <span className="inline-flex items-center gap-1">
                  {plan.max_students || 1}
                  <span className="text-stone-400">👤</span>
                </span>
              </td>
              <td className="py-2 pr-4">
                {plan.is_default ? (
                  <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium bg-red-50 text-red-700 border border-red-100">
                    Default
                  </span>
                ) : (
                  <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium bg-stone-50 text-stone-500 border border-stone-200">
                    No
                  </span>
                )}
              </td>
              <td className="py-2 pr-4">
                <span
                  className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium border ${
                    plan.is_active
                      ? "bg-emerald-50 text-emerald-700 border-emerald-100"
                      : "bg-stone-50 text-stone-500 border-stone-200"
                  }`}
                >
                  {plan.is_active ? "Active" : "Hidden"}
                </span>
              </td>
              <td className="py-2 pr-4 text-right">
                <div className="inline-flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => onEdit(plan)}
                    className="text-[11px] text-indigo-600 hover:underline"
                  >
                    Edit
                  </button>
                  <button
                    type="button"
                    onClick={() => onDelete(plan.id)}
                    className="text-[11px] text-rose-600 hover:underline"
                  >
                    Delete
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}