import React, { useEffect, useState } from 'react';
import { useInbox } from '../store.js';

export function SearchBox(): React.ReactElement {
  const [draft, setDraft] = useState('');

  useEffect(() => {
    const handle = setTimeout(() => {
      const trimmed = draft.trim();
      if (trimmed.length === 0) useInbox.getState().clearSearch();
      else void useInbox.getState().searchNotes(trimmed);
    }, 200);
    return () => clearTimeout(handle);
  }, [draft]);

  return (
    <input
      type="search"
      role="searchbox"
      placeholder="검색…"
      value={draft}
      onChange={(e) => setDraft(e.target.value)}
      aria-label="노트 검색"
      style={{
        marginLeft: 12,
        padding: '4px 8px',
        fontSize: 12,
        border: '1px solid #bbb',
        borderRadius: 4,
        width: 200
      }}
    />
  );
}
