import { clsx } from 'clsx';
import { useContext } from 'react';
import { SelectInputOptionContentWithinTriggerContext } from '../SelectInput.contexts';

export interface SelectInputOptionContentProps {
  title: React.ReactNode;
  note?: string;
  description?: string;
  icon?: React.ReactNode;
}

/**
 * Component for rendering structured content within a SelectInput option.
 * Supports title, optional note, description, and icon with different styling
 * based on whether it's rendered within the trigger button or the dropdown.
 */
export function SelectInputOptionContent({
  title,
  note,
  description,
  icon,
}: SelectInputOptionContentProps) {
  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);

  return (
    <div
      className={clsx(
        'np-select-input-option-content-container',
        (note || description) && 'np-text-body-large',
      )}
    >
      {icon ? (
        <div
          className={clsx(
            'np-select-input-option-content-icon',
            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',
          )}
        >
          {icon}
        </div>
      ) : null}

      <div className="np-select-input-option-content-text">
        <div
          className={clsx(
            'np-select-input-option-content-text-line-1',
            withinTrigger && 'np-select-input-option-content-text-within-trigger',
          )}
        >
          <div className="d-inline">{title}</div>
          {note ? (
            <span className="np-select-input-option-content-text-secondary np-text-body-default">
              {note}
            </span>
          ) : null}
        </div>

        {description ? (
          <div
            className={clsx(
              'np-select-input-option-content-text-secondary np-text-body-default',
              withinTrigger &&
                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',
            )}
          >
            {description}
          </div>
        ) : null}
      </div>
    </div>
  );
}