import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { fetchEvent, EventData } from '../services/eventApi';

export function useEventData() {
  const { slug } = useParams<{ slug: string }>();
  const [event, setEvent] = useState<EventData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!slug) {
      setError('No event slug provided');
      setLoading(false);
      return;
    }

    const loadEvent = async () => {
      try {
        setLoading(true);
        setError(null);
        const eventData = await fetchEvent(slug);
        setEvent(eventData);
      } catch (err) {
        console.error('Failed to load event:', err);
        setError(err instanceof Error ? err.message : 'Failed to load event');
      } finally {
        setLoading(false);
      }
    };

    loadEvent();
  }, [slug]);

  return {
    event,
    loading,
    error,
  };
}