/**
 * HighlightableField Component
 * A lightweight wrapper that provides an ID for search navigation and
 * applies highlight styling when the field is selected from search results.
 *
 * Used with the schema-based search system where field registration
 * happens via settingsSchema.ts rather than component registration.
 */
import React, { useContext } from "react";
import { SearchContext } from "./SearchableField";

export interface HighlightableFieldProps {
  /** Unique identifier matching the schema field ID */
  id: string;
  /** Child elements to render */
  children: React.ReactNode;
  /** Optional additional className */
  className?: string;
}

/**
 * Wrapper component that provides a target for search result navigation
 * and applies highlight styling when this field is the search target.
 */
export function HighlightableField({
  id,
  children,
  className = "",
}: HighlightableFieldProps) {
  const context = useContext(SearchContext);
  const isHighlighted = context?.highlightedFieldId === id;

  // Base styling
  const baseClassName = `b3-wvs-transition-all b3-wvs-duration-500 ${
    isHighlighted
      ? "b3-wvs-ring-2 b3-wvs-ring-admin b3-wvs-ring-offset-4 b3-wvs-rounded-lg b3-wvs-bg-blue-50/50"
      : ""
  } ${className}`;

  return (
    <div id={id} data-highlightable-field={id} className={baseClassName}>
      {children}
    </div>
  );
}