import React, { useState, useEffect } from 'react';
import EntryList from '../components/EntryList';
import SearchBar from '../components/SearchBar';
import './Home.css';

const Home = () => {
  const [entries, setEntries] = useState([]);
  const [filteredEntries, setFilteredEntries] = useState([]);

  useEffect(() => {
    // In a real app, this would fetch from an API or data file
    // For now, we'll use mock data
    const mockEntries = [
      {
        id: 1,
        term: "Hacker",
        definition: "A person who enjoys exploring the details of programmable systems and how to stretch their capabilities.",
        category: "Core Terms"
      },
      {
        id: 2,
        term: "Guru",
        definition: "A person who has achieved a high level of skill in a particular field or domain.",
        category: "Core Terms"
      },
      {
        id: 3,
        term: "Foo",
        definition: "A generic term used as a placeholder in examples and documentation.",
        category: "Technical Terms"
      }
    ];
    
    setEntries(mockEntries);
    setFilteredEntries(mockEntries);
  }, []);

  const handleSearch = (searchTerm) => {
    if (!searchTerm) {
      setFilteredEntries(entries);
      return;
    }
    
    const filtered = entries.filter(entry => 
      entry.term.toLowerCase().includes(searchTerm.toLowerCase()) ||
      entry.definition.toLowerCase().includes(searchTerm.toLowerCase())
    );
    
    setFilteredEntries(filtered);
  };

  return (
    <div className="home">
      <div className="hero">
        <h2>Explore Hacker Culture</h2>
        <p>Discover the terminology that defines computer hacker culture</p>
      </div>
      <SearchBar onSearch={handleSearch} />
      <EntryList entries={filteredEntries} />
    </div>
  );
};

export default Home;