/**
 * ComingSoon Component
 * Displays a placeholder for features not yet available in production.
 * Used to prevent mock data from being shown to production users.
 */

import type { ReactElement, ReactNode } from "react";

export interface ComingSoonProps {
  /** The name of the feature being developed */
  feature: string;
  /** Optional custom description */
  description?: string;
  /** Optional children to render below the message */
  children?: ReactNode;
  /** Optional className for the container */
  className?: string;
}

/**
 * ComingSoon displays a friendly placeholder for incomplete features.
 * Use this in production when a feature is under development to avoid
 * showing mock or placeholder data to users.
 */
export function ComingSoon({
  feature,
  description,
  children,
  className = "",
}: ComingSoonProps): ReactElement {
  const defaultDescription =
    "This feature is currently under development and will be available soon.";

  return (
    <main className={`container mx-auto px-4 py-8 max-w-3xl ${className}`} role="main">
      <div className="flex flex-col items-center justify-center min-h-[400px] bg-gray-50 rounded-lg border border-gray-200 p-8 text-center">
        {/* Construction Icon */}
        <svg
          className="w-16 h-16 text-blue-400 mb-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
          />
        </svg>

        {/* Coming Soon Badge */}
        <span className="inline-block px-4 py-1.5 bg-blue-100 text-blue-700 text-sm font-medium rounded-full mb-4">
          Coming Soon
        </span>

        {/* Feature Name */}
        <h1 className="text-2xl font-bold text-gray-900 mb-3">{feature}</h1>

        {/* Description */}
        <p className="text-gray-600 max-w-md mb-6">{description ?? defaultDescription}</p>

        {/* Optional Children */}
        {children && <div className="mt-4">{children}</div>}
      </div>
    </main>
  );
}

export default ComingSoon;