/**
 * Access denied state: message and optional server detail.
 * Ported from webapp/js/ui.js showAccessDenied and states.css .access-denied.
 */

"use client";

import { useTranslation } from "@/i18n/use-translation";
import { cn } from "@/lib/utils";

export interface AccessDeniedProps {
  /** Optional detail from API 403 response, shown below the main message. */
  serverDetail?: string | null;
  /** Optional class for the container. */
  className?: string;
}

/**
 * Displays access denied message; optional second paragraph for server detail.
 */
export function AccessDenied({ serverDetail, className }: AccessDeniedProps) {
  const { t } = useTranslation();
  const hasDetail = Boolean(serverDetail && String(serverDetail).trim());

  return (
    <div
      className={cn(
        "rounded-xl bg-surface py-6 px-4 my-3 text-center text-muted-foreground shadow-sm transition-opacity duration-200",
        className
      )}
      role="alert"
    >
      <p className="m-0 mb-2 font-semibold text-error">
        {t("access_denied")}
      </p>
      {hasDetail && (
        <p className="mt-2 m-0 text-sm text-muted">
          {serverDetail}
        </p>
      )}
      <p className="mt-2 m-0 text-sm text-muted">
        {t("access_denied.hint")}
      </p>
    </div>
  );
}