// src/pages/SearchPage.tsx
import { useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { motion } from 'framer-motion'
import { MovieCard } from '@/components/MovieCard'
import { useMovieSearch } from '@/hooks/useMovieSearch'

export function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams()
  const [query, setQuery] = useState(searchParams.get('q') ?? '')
  const { data, isLoading, isError } = useMovieSearch(query)

  function handleSearch(e: React.FormEvent) {
    e.preventDefault()
    setSearchParams(query ? { q: query } : {})
  }

  return (
    <div className="max-w-6xl mx-auto px-4 py-8">
      <form onSubmit={handleSearch} className="mb-8">
        <div className="flex gap-3">
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search movies and shows..."
            className="flex-1 border border-border rounded-lg px-4 py-3 bg-background text-foreground"
            aria-label="Search movies"
          />
          <button
            type="submit"
            className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium"
          >
            Search
          </button>
        </div>
      </form>

      {isLoading && (
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
          {Array.from({ length: 10 }).map((_, i) => (
            <div key={i} className="aspect-[2/3] bg-muted rounded-xl animate-pulse" />
          ))}
        </div>
      )}

      {isError && (
        <div role="alert" className="text-center py-12 text-red-500">
          Search failed. Please try again.
        </div>
      )}

      {data?.Response === 'True' && (
        <motion.div
          className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4"
          initial="hidden"
          animate="visible"
        >
          {data.Search.map((movie, i) => (
            <MovieCard key={movie.imdbID} movie={movie} index={i} />
          ))}
        </motion.div>
      )}

      {data?.Response === 'False' && (
        <div className="text-center py-12 text-muted-foreground">
          No results for "{query}"
        </div>
      )}
    </div>
  )
}
פרויקט — בניית אפליקציה שלמה עם React + TypeScript

פרויקט — בניית אפליקציה שלמה עם React + TypeScript
