"use client"

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { SearchIcon } from 'lucide-react'
import { Input } from "./ui/input"
import { Button } from "./ui/button"

export function Search() {
  const [searchTerm, setSearchTerm] = useState('')
  const router = useRouter()

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (searchTerm.trim()) {
      router.push(`/search?q=${encodeURIComponent(searchTerm.trim())}`)
    }
  }

  return (
    <form onSubmit={handleSearch} className="relative w-full max-w-lg">
      <Input
        type="search"
        placeholder="Искать на Store"
        className="pl-10 pr-20 w-full"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
      <Button type="submit" className="absolute right-1 top-1/2 transform -translate-y-1/2">
        Найти
      </Button>
    </form>
  )
}