'use client';

import { useState } from 'react';
import { MatrixSearch, type SearchItem } from '@/components/dot-matrix/search-entry';

const items: SearchItem[] = [
  { id: 'notes', title: 'Field notes', detail: 'Ideas worth keeping' },
  { id: 'voice', title: 'Voice recordings', detail: 'Notes from the coast' },
  { id: 'motion', title: 'Motion references', detail: 'A collection of small details' },
];

export default function SearchExample() {
  const [query, setQuery] = useState('');
  const [selection, setSelection] = useState('Try notes, voice or motion');
  return <div style={{ width: '100%', display: 'grid', justifyItems: 'center', gap: 24 }}>
    <MatrixSearch query={query} onQueryChange={setQuery} items={items} onSelect={item => setSelection(`Selected: ${item.title}`)} />
    <p role="status" style={{ margin: 0, fontSize: 13 }}>{selection}</p>
  </div>;
}