Search.jsx

import React, { useEffect, useState, useMemo } from 'react';
import ApiStatusIndicator from '../components/ApiStatusIndicator';
import PostList from '../components/PostList';

const API_URL = 'https://super-barnacle-g4964vwvq4p5hvj67-3000.app.github.dev/api/posts';

export default function Search() {
  const [posts, setPosts] = useState([]);
  const [query, setQuery] = useState('');
  const [apiAvailable, setApiAvailable] = useState(true);

  useEffect(() => {
    fetch(API_URL)
      .then(res => {
        if (!res.ok) throw new Error('API unavailable');
        return res.json();
      })
      .then(data => {
        setPosts(data);
        setApiAvailable(true);
      })
      .catch(() => {
        setApiAvailable(false);
      });
  }, []);

  const filtered = useMemo(() => {
    if (!query) return posts;
    return posts.filter(post =>
      post.content.toLowerCase().includes(query.toLowerCase()) ||
      post.username.toLowerCase().includes(query.toLowerCase())
    );
  }, [query, posts]);

  return (
    <div className="search-page" style={{ background: '#F5F6FA', minHeight: '100vh', fontFamily: 'Inter, Arial, sans-serif' }}>
      <header style={{ background: '#fff', boxShadow: '0 2px 8px #e0e0e0', padding: '24px 0', textAlign: 'center' }}>
        <h1 style={{ fontWeight: 700, fontSize: '2rem', margin: 0, color: '#222' }}>Search Posts</h1>
        <ApiStatusIndicator available={apiAvailable} />
      </header>
      <main style={{ maxWidth: 600, margin: '32px auto', padding: '0 16px' }}>
        <input
          type="text"
          placeholder="Search by content or username..."
          value={query}
          onChange={e => setQuery(e.target.value)}
          style={{ width: '100%', padding: '12px', marginBottom: '24px', borderRadius: '8px', border: '1px solid #d1d5db', fontSize: '1rem', background: '#fff', boxShadow: '0 1px 4px #e0e0e0' }}
        />
        <PostList posts={filtered} />
      </main>
    </div>
  );
}