'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/shared/ui/button';
import { Search } from 'lucide-react';
import useFilterStore from '@/shared/store/filterStore';

const SearchProduct = () => {
  const [localQuery, setLocalQuery] = useState('');
  const { setSearchQuery, setCurrentPage } = useFilterStore();
  const router = useRouter();

  const handleSearch = () => {
    if (localQuery.trim()) {
      setSearchQuery(localQuery.trim());
      setCurrentPage(1);
      router.push(`/products`);
      setLocalQuery('');
    }
  };

  return (
    <div className="relative">
      {/* Search icon (chap tomonda) */}
      <div className="absolute top-0 bottom-0 left-[10px] w-[30px] flex justify-center items-center">
        <Search size={'16px'} className="stroke-muted" />
      </div>

      {/* Input */}
      <input
        value={localQuery}
        onChange={(e) => setLocalQuery(e.target.value)}
        className="py-[10px] pl-[40px] pr-[100px] w-full bg-muted-foreground text-[14px] text-muted outline-none rounded-full placeholder:text-muted"
        type="text"
        placeholder="Поиск здесь"
      />

      {/* Поиск tugmasi (o‘ng tomonda) */}
      <div className="absolute top-0 bottom-0 right-0 flex justify-center items-center">
        <Button size={'lg'} onClick={handleSearch}>
          Поиск
        </Button>
      </div>
    </div>
  );
};

export default SearchProduct;
