import styles from './SearchResultState.module.css';

interface SearchResultStateProps {
  query: string;
  targetCount: number;
  selectedTargetIndex: number;
  onReset: () => void;
  onSelectTarget: (targetIndex: number) => void;
}

export function SearchResultState({
  query,
  targetCount,
  selectedTargetIndex,
  onReset,
  onSelectTarget,
}: SearchResultStateProps) {
  const hasMultipleTargets = targetCount > 1;

  return (
    <div className={styles.result} aria-live="polite">
      <strong>找到你了 · {query}</strong>
      <small>{hasMultipleTargets ? `找到 ${targetCount} 处` : '你在这里'}</small>
      <div className={styles.resultRow}>
        <button
          type="button"
          className={styles.ghostButton}
          onClick={onReset}
        >
          查看全图
        </button>
        {hasMultipleTargets ? (
          <>
            <button
              type="button"
              className={styles.ghostButton}
              onClick={() => onSelectTarget(Math.max(0, selectedTargetIndex - 1))}
              disabled={selectedTargetIndex === 0}
            >
              上一处
            </button>
            <button
              type="button"
              className={styles.ghostButton}
              onClick={() => onSelectTarget(Math.min(targetCount - 1, selectedTargetIndex + 1))}
              disabled={selectedTargetIndex === targetCount - 1}
            >
              下一处
            </button>
            <small className={styles.count}>
              {selectedTargetIndex + 1} / {targetCount}
            </small>
          </>
        ) : null}
      </div>
    </div>
  );
}