import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Main = () => {
    const [contentType, setContentType] = useState('movies'); // Default to movies
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const API_KEY = process.env.REACT_APP_OMDB_API_KEY;
            const url = `https://www.omdbapi.com/?apikey=${API_KEY}&s=batman&type=${contentType}`;
            try {
                const response = await axios.get(url);
                setData(response.data.Search);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, [contentType]);

    return (
        <div>
            <button onClick={() => setContentType('movies')}>Movies</button>
            <button onClick={() => setContentType('series')}>TV Shows</button>
            {data.map(item => (
                <div key={item.imdbID}>
                    <h3>{item.Title}</h3>
                    <img src={item.Poster} alt={item.Title} />
                </div>
            ))}
        </div>
    );
};

export default Main;



import React from 'react';
import Navbar from './components/Navbar';
import Main from './components/Main';

const App = () => {
    return (
        <>
            <Navbar />
            <Main />
        </>
    );
};

export default App;