'use client';

/**
 * EndpointCard Component
 *
 * A structured display block for API endpoint information including HTTP method,
 * path, and base URL. Creates consistent, scannable API reference documentation.
 *
 * ## Design Principles
 *
 * 1. **Information Grouping**: Related endpoint data in one visual container
 *    - Method badge + endpoint path on same line for scannability
 *    - Base URL separated below for clarity without clutter
 *    - Container styling creates clear boundaries
 *
 * 2. **Visual Hierarchy**: Emphasis guides attention naturally
 *    - HTTP method badge draws eye first (color + position)
 *    - Endpoint path is prominent (white text, slightly larger)
 *    - Base URL is secondary (smaller, muted gray)
 *
 * 3. **Technical Precision**: Monospace fonts for code accuracy
 *    - Endpoint path uses code styling
 *    - Prevents ambiguity in technical content
 *    - Familiar to developers
 *
 * ## Layout Strategy
 *
 * Horizontal Flow:
 * ```
 * [METHOD BADGE] /api/endpoint-path
 * Base URL: https://api.example.com
 * ```
 *
 * This layout:
 * - Puts most important info (method + path) on top line
 * - Creates natural left-to-right reading flow
 * - Groups related information visually
 * - Works well at various screen sizes
 *
 * ## Container Styling
 *
 * Background & Border:
 * - bg-slate-900/50: Semi-transparent dark background
 *   - Separates from page background
 *   - Maintains dark theme consistency
 *   - Subtle enough not to dominate
 *
 * - border-slate-700: Defined edges
 *   - Creates clear container boundaries
 *   - Adds structure without heaviness
 *   - Professional, technical appearance
 *
 * - rounded-xl: Soft corners (12px radius)
 *   - Modern, friendly appearance
 *   - Matches other card elements
 *   - Balances technical precision with approachability
 *
 * Padding:
 * - p-4 (16px): Comfortable breathing room
 *   - Prevents cramped appearance
 *   - Makes content easy to read
 *   - Balances whitespace and content
 *
 * ## Typography System
 *
 * Endpoint Path:
 * - text-sm: Slightly smaller than body but clearly readable
 * - text-white: Maximum contrast for primary content
 * - font-mono implicitly via <code>: Technical accuracy
 *
 * Base URL:
 * - text-xs: Clearly secondary information
 * - text-gray-400: Muted to not compete with endpoint
 * - Includes "Base URL:" label for context
 *
 * ## Spacing & Layout
 *
 * Flex Layout Benefits:
 * - items-center: Vertically centers badge with text
 * - gap-3 (12px): Comfortable space between badge and path
 * - mb-2 (8px): Separates primary info from base URL
 *
 * ## Usage Examples
 *
 * ```tsx
 * // Standard REST endpoint
 * <EndpointCard
 *   method="POST"
 *   endpoint="/api/text-to-image"
 *   baseUrl="https://api.banatie.com"
 * />
 *
 * // Different HTTP methods
 * <EndpointCard
 *   method="GET"
 *   endpoint="/api/images"
 * />
 *
 * <EndpointCard
 *   method="DELETE"
 *   endpoint="/api/admin/keys/:keyId"
 * />
 *
 * // Custom base URL
 * <EndpointCard
 *   method="PUT"
 *   endpoint="/api/projects/:id"
 *   baseUrl="https://api.custom-domain.com"
 * />
 * ```
 *
 * ## Content Guidelines
 *
 * HTTP Method:
 * - Always uppercase (GET, POST, PUT, DELETE, PATCH)
 * - Choose semantically correct method
 * - Follows REST conventions
 *
 * Endpoint Path:
 * - Start with forward slash (/)
 * - Use lowercase with hyphens (kebab-case)
 * - Include path parameters with colon prefix (:id, :keyId)
 * - Be specific and descriptive
 * - Example: `/api/projects/:projectId/keys`
 *
 * Base URL:
 * - Include protocol (https://)
 * - Use production URL as default
 * - No trailing slash
 * - Example: `https://api.banatie.com`
 *
 * ## Accessibility
 *
 * - Semantic HTML structure
 * - Proper contrast ratios for all text
 * - MethodBadge includes aria-label
 * - Logical reading order (method → path → base)
 * - Keyboard accessible (no interactive elements, but focusable context)
 *
 * ## Visual Language
 *
 * The EndpointCard establishes:
 * - Professional, technical aesthetic
 * - Consistent API documentation pattern
 * - Clear, unambiguous endpoint identification
 * - Easy copy-paste of endpoint information
 * - Quick visual scanning in multi-endpoint docs
 *
 * @component
 * @example
 * <EndpointCard
 *   method="POST"
 *   endpoint="/api/text-to-image"
 *   baseUrl="https://api.banatie.com"
 * />
 */

import { MethodBadge, HttpMethod } from './MethodBadge';

/**
 * Props for the EndpointCard component
 */
export interface EndpointCardProps {
  /** HTTP method for the endpoint */
  method: HttpMethod;
  /** API endpoint path (e.g., "/api/users") */
  endpoint: string;
  /** Base URL for the API (default: "https://api.banatie.com") */
  baseUrl?: string;
  /** Optional CSS class name for additional styling */
  className?: string;
}

export const EndpointCard = ({
  method,
  endpoint,
  baseUrl = 'https://api.banatie.com',
  className = '',
}: EndpointCardProps) => {
  return (
    <div
      className={`
        p-4
        bg-slate-900/50
        border border-slate-700
        rounded-xl
        ${className}
      `}
    >
      {/* Method + Endpoint Row */}
      <div className="flex items-center gap-3 mb-2">
        <MethodBadge method={method} />
        <code className="text-sm text-white">{endpoint}</code>
      </div>

      {/* Base URL */}
      <p className="text-xs text-gray-400">
        Base URL: <code className="text-purple-400">{baseUrl}</code>
      </p>
    </div>
  );
};
