import React, { useEffect, useState } from 'react';
import { mostReservedThemes } from '@_api/theme/themeAPI';

const HomePage: React.FC = () => {
  const [ranking, setRanking] = useState<any[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      await mostReservedThemes(10).then(response => setRanking(response.themes))
    };

    fetchData().catch(err => console.error('Error fetching ranking:', err));
  }, []);

  return (
    <div className="content-container">
      <h2 className="content-container-title">인기 테마</h2>
      <ul className="list-unstyled" id="theme-ranking">
        {ranking.map(theme => (
          <li key={theme.id} className="d-flex my-4">
            <img className="me-3 img-thumbnail" src={theme.thumbnail} alt={theme.name} style={{ width: '150px' }} />
            <div className="media-body">
              <h5 className="mt-0 mb-1">{theme.name}</h5>
              {theme.description}
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default HomePage;