// components/organisms/PartnersSection.jsx
'use client';

import Image from 'next/image';
import { useState, useEffect } from 'react';

// Define the partner type
interface Partner {
  id: number;
  name: string;
  picture: string;
  // Add other partner properties as needed
}

interface PartnersSectionProps {
  partnersData: Partner[]; // Data passed from server component
}

const PartnersSection = ({ partnersData }: PartnersSectionProps) => {
  const [partners, setPartners] = useState<Partner[]>([]);
  const [loading, setLoading] = useState(true);

  // Use the data passed from server component
  useEffect(() => {
    if (partnersData) {
      setPartners(partnersData);
      setLoading(false);
    }
  }, [partnersData]);

  // Create marquee content - duplicate partners for seamless loop
  const marqueePartners = partners.length > 0 ? [...partners, ...partners] : [];

  // Loading state
  if (loading) {
    return (
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-4xl font-bold text-center text-gray-800 mb-12">
            Our Partners
          </h2>
          <div className="flex justify-center items-center space-x-12">
            {[...Array(6)].map((_, index) => (
              <div key={index} className="flex-shrink-0">
                <div className="w-32 h-16 bg-gray-200 rounded shadow flex items-center justify-center animate-pulse">
                  <span className="text-gray-400 text-sm">Loading...</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // No partners state
  if (partners.length === 0) {
    return (
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-4xl font-bold text-center text-gray-800 mb-12">
            Our Partners
          </h2>
          <div className="text-center text-gray-600">
            <p>No partners available.</p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="py-16 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4">
        {/* Simple Heading */}
        <h2 className="text-4xl font-bold text-center text-gray-800 mb-12">
          Our Partners
        </h2>

        {/* Single Marquee Row */}
        <div className="relative overflow-hidden">
          <div className="flex animate-marquee space-x-12">
            {marqueePartners.map((partner, index) => (
              <div key={`${partner.id}-${index}`} className="flex-shrink-0">
                <div className="w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center p-2 hover:shadow-lg transition-shadow duration-300">
                  {partner.picture ? (
                    <Image 
                      src={partner.picture} 
                      alt={partner.name}
                      width={80} // Adjust based on your design
                      height={40} // Adjust based on your design
                      className="max-w-full max-h-full object-contain"
                      loading="lazy"
                    />
                  ) : null}
                  
                  {/* Fallback text - hidden by default, shown if no picture or image fails */}
                  <span 
                    className="text-gray-600 font-medium text-sm text-center"
                    style={{ 
                      display: partner.picture ? 'none' : 'flex',
                      alignItems: 'center',
                      justifyContent: 'center'
                    }}
                  >
                    {partner.name}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .animate-marquee {
          animation: marquee ${partners.length * 2}s linear infinite;
        }
        
        /* Pause animation on hover */
        .animate-marquee:hover {
          animation-play-state: paused;
        }
      `}</style>
    </section>
  );
};

export default PartnersSection;