import React, { useState } from "react";
import Accordion from "./components/Accordion";
import { Topic } from "./types";

const topics: Topic[] = [
  {
    id: "1",
    title: "React Hooks",
    content:
      "React Hooks allow you to use state and other React features without writing a class.",
  },
  {
    id: "2",
    title: "React Router",
    content:
      "React Router is a standard library for routing in React applications.",
  },
  {
    id: "3",
    title: "Context API",
    content:
      "The Context API provides a way to pass data through the component tree without having to pass props down manually at every level.",
  },
  {
    id: "4",
    title: "Redux",
    content: "Redux is a predictable state container for JavaScript apps.",
  },
];

const App: React.FC = () => {
  const [openItemsIds, setOpenItemsIds] = useState<string[]>([]);

  const onToggle = (id: string) => {
    if (openItemsIds.includes(id)) {
      setOpenItemsIds(openItemsIds.filter((itemId) => itemId !== id));
    } else {
      setOpenItemsIds([...openItemsIds, id]);
    }
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-4xl font-bold mb-8 text-center bg-green-500 text-white py-4 rounded-lg shadow-md">
        React Topics
      </h1>
      <div data-testid="accordion">
        {topics.map((topic) => (
          <Accordion
            key={topic.title}
            id={topic.id}
            title={topic.title}
            content={topic.content}
            isOpen={openItemsIds.includes(topic.id)}
            onToggle={onToggle}
          />
        ))}
      </div>
    </div>
  );
};

export default App;