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

const HomepageCarousel = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Just finish loading after a brief moment
    const timer = setTimeout(() => {
      setLoading(false);
    }, 500);
    
    return () => clearTimeout(timer);
  }, []);

  if (loading) {
    return (
      <div className="relative h-64 bg-gradient-to-r from-emerald-500 to-teal-600 rounded-xl animate-pulse">
        <div className="absolute inset-0 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
          <div className="text-white text-lg">Loading...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="relative h-64 rounded-xl overflow-hidden shadow-2xl bg-slate-50 dark:bg-slate-800 flex items-center justify-center">
      <img
        src="/images/logo.png"
        alt="SeerBharat Logo"
        className="max-h-full max-w-full object-contain p-4"
        onError={(e) => { e.target.style.display = 'none'; }}
      />
    </div>
  );
};

export default HomepageCarousel;