"use client";

import React, { useEffect, useRef, useState } from "react";
import clsx from "clsx";

interface PropsSearch {
  placeholder?: string;
  keyword?: string;
  setKeyword: (value: string) => void;
}

export default function Search({
  keyword = "",
  setKeyword,
  placeholder = "Nhập từ khóa tìm kiếm",
}: PropsSearch) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [searchTerm, setSearchTerm] = useState(keyword);

  useEffect(() => {
    const timer = setTimeout(() => {
      setKeyword(searchTerm.trim());
    }, 600);

    return () => clearTimeout(timer);
  }, [searchTerm]);

  return (
    <div
      onClick={() => inputRef.current?.focus()}
      className={clsx(
        "flex h-12 cursor-text items-center gap-2 rounded-full border bg-white px-4 transition-colors",
        "border-[#e1e5ed] hover:border-[#3772ff] focus-within:border-[#3772ff]",
      )}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="size-6 text-[#908F99]"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
        />
      </svg>

      <input
        ref={inputRef}
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder={placeholder}
        className={clsx(
          "flex-1",
          "border-none",
          "bg-transparent",
          "p-2",
          "text-[16px]",
          "font-medium",
          "outline-none",
          "placeholder:text-[#777e90]",
        )}
      />
    </div>
  );
}