interface DeveloperAccessRequestCardProps {
  title: string;
  isPending: boolean;
  canRequest: boolean;
  pendingMessage: string;
  deniedMessage: string;
  pendingDetailMessage: string;
  deniedDetailMessage: string;
  actionLabel: string;
  onAction: () => void;
}

export function DeveloperAccessRequestCard({
  title,
  isPending,
  canRequest,
  pendingMessage,
  deniedMessage,
  pendingDetailMessage,
  deniedDetailMessage,
  actionLabel,
  onAction,
}: DeveloperAccessRequestCardProps) {
  const showAction = isPending || canRequest;

  return (
    <div className="rounded-xl border border-border/60 bg-card p-8 text-center">
      <div className="space-y-3">
        <h2 className="text-2xl font-semibold tracking-tight">{title}</h2>
        <p className="font-medium text-foreground">
          {isPending ? pendingMessage : deniedMessage}
        </p>
        <p className="text-sm text-muted-foreground">
          {isPending ? pendingDetailMessage : deniedDetailMessage}
        </p>
        {showAction && (
          <button
            type="button"
            className="font-bold text-primary hover:underline"
            onClick={onAction}
          >
            {actionLabel}
          </button>
        )}
      </div>
    </div>
  );
}
