import { useEffect, useState } from "react";

function useDebounce<T>(value: T, delay: number) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}

const [query, setQuery] = useState("");
const debouncedQuery = useDebounce(query, 500);

useEffect(() => {
  if (debouncedQuery) {
    fetch(`/api/search?q=${debouncedQuery}`);
  }
}, [debouncedQuery]);

import { motion } from 'framer-motion';

const Button: React.FC = () => {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }} // Анимация при наведении курсора
      whileTap={{ scale: 0.9 }} // Анимация при клике
      initial={{ opacity: 0 }} // Начальное состояние
      animate={{ opacity: 1 }} // Конечное состояние
      transition={{ duration: 0.3 }} // Длительность
    >
      Нажми меня
    </motion.button>
  );
};

export default Button;