"use client";
import { useState, useEffect } from 'react';
import { Input } from '@/components/ui/input';

export default function DiplomarbeitSearch() {
  const [search, setSearch] = useState('');
  const [results, setResults] = useState<string[]>([]);

  useEffect(() => {
    const timeoutId = setTimeout(async () => {
      const response = await fetch(`/api/diplomarbeiten?search=${search}`);
      const data = await response.json();
      setResults(data.titles || []);
    }, 500); // 500ms cooldown period

    return () => clearTimeout(timeoutId);
  }, [search]);

  return (
    <div className="w-full">
      <Input type="text" value={search} placeholder="Suche" onChange={(e) => setSearch(e.target.value)} className="w-full" />
      {results.map((title, index) => (
        <div key={index}>
          <h2>{title}</h2>
        </div>
      ))}
    </div>
  );
}