// app/components/SearchBar.tsx
'use client'  // This component runs in the browser

import { useState } from 'react'
import { useRouter } from 'next/navigation'

export function SearchBar() {
  const [query, setQuery] = useState('')
  const router = useRouter()

  function handleSearch(e: React.FormEvent) {
    e.preventDefault()
    router.push(`/search?q=${encodeURIComponent(query)}`)
  }

  return (
    <form onSubmit={handleSearch}>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search movies..."
      />
      <button type="submit">Search</button>
    </form>
  )
}

// app/page.tsx — Server Component
import { SearchBar } from './components/SearchBar'

export default async function HomePage() {
  // This runs on the server — can access env secrets, DB, etc.
  const featuredMovies = await fetchFeaturedMovies()

  return (
    <div>
      <SearchBar /> {/* Client Component embedded in Server Component */}
      <ul>
        {featuredMovies.map((movie) => (
          <li key={movie.id}>{movie.title}</li>
        ))}
      </ul>
    </div>
  )
}
מבוא ל-Next.js — SSR, SSG, App Router

מבוא ל-Next.js — SSR, SSG, App Router
