import type { FunctionalComponent } from 'preact';
import { useT } from '../../hooks/useT';
import { AsukaIcon } from '../core/AsukaIcon';

interface OverlayHeaderProps {
  title: string;
  icon?: string | null;
  canBack?: boolean;
  onBack?: () => void;
  onClose?: () => void;
  compact?: boolean;
}

/**
 * OverlayHeader (F8)
 * - Unified header: title + back + close
 * - Used by ModuleHost and potentially later by SelectionMenu.
 */
export const OverlayHeader: FunctionalComponent<OverlayHeaderProps> = ({
  title,
  icon,
  canBack,
  onBack,
  onClose,
  compact,
}) => {
  const t = useT();
  return (
    <div class={`ask-overlay__header ${compact ? 'ask-overlay__header--compact' : ''}`.trim()}>
      <div class="ask-flex ask-items-center ask-gap-2 ask-min-w-0">
        {canBack ? (
          <button
            type="button"
            onClick={onBack}
            class="ask-theme-btn ask-theme-btn-secondary ask-text-[11px] ask-inline-flex ask-items-center ask-gap-1 ask-rounded-full ask-border ask-px-2 ask-py-0.5"
            title={t('ui.back')}
          >
            <span class="ask-text-xs">←</span>
            <span>{t('ui.back')}</span>
          </button>
        ) : null}

        {icon ? <AsukaIcon name={icon} className="ask-icon--overlay" /> : null}
        <span class="ask-text-[11px] ask-font-semibold ask-truncate">{title}</span>
      </div>

      {onClose ? (
        <button
          type="button"
          onClick={onClose}
          class="ask-theme-btn ask-theme-btn-ghost ask-text-[11px] ask-rounded-md ask-px-2 ask-py-1"
          title={t('common.close')}
        >{t('common.close')}</button>
      ) : null}
    </div>
  );
};