oms-website-nextjs/app/(website)/_components/ClientLogosSection.tsx

// components/ClientLogosSection.tsx
import React from "react";
import Image from "next/image"; // For actual logos
import { FaBuilding, FaCar, FaLaptopCode, FaUsers } from "react-icons/fa"; // For placeholders

// Define structure for client data (adapt as needed)
type Client = {
  name: string;
  logoUrl?: string; // URL to actual logo image
  icon?: React.ElementType; // Placeholder icon component
};

type ClientLogosSectionProps = {
  title: string;
  description?: string;
  clients: Client[];
};

const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
  title,
  description,
  clients,
}) => {
  return (
    // Use semantic background
    <section className="py-16 md:py-20 bg-background">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
        {" "}
        {/* Use container */}
        {/* Use semantic foreground */}
        <h2 className="text-3xl md:text-4xl font-bold mb-12 text-foreground">
          {title}
        </h2>
        {/* TODO: Implement Auto-Sliding Panel (e.g., using Swiper.js or Embla Carousel) */}
        <div className="flex flex-wrap justify-center items-center gap-10 md:gap-16 opacity-70 dark:opacity-60">
          {" "}
          {/* Adjust opacity */}
          {clients.map((client, index) => (
            <div
              key={index}
              title={client.name}
              className="transition-opacity hover:opacity-100"
            >
              {client.logoUrl ? (
                <Image
                  src={client.logoUrl}
                  alt={`${client.name} Logo`}
                  width={120} // Adjust size as needed
                  height={40} // Adjust size as needed
                  objectFit="contain"
                  className="dark:invert dark:filter" // Example: Invert logo colors in dark mode if needed
                />
              ) : client.icon ? (
                // Use semantic muted foreground for icons, primary on hover
                React.createElement(client.icon, {
                  className:
                    "text-5xl text-muted-foreground/80 hover:text-primary transition-colors",
                })
              ) : (
                <span className="text-muted-foreground">{client.name}</span> // Fallback text
              )}
            </div>
          ))}
        </div>
        {description && (
          <p className="mt-8 text-muted-foreground italic text-sm">
            {description}
          </p>
        )}
      </div>
    </section>
  );
};

// Example default data matching the original page (using placeholders)
export const defaultClients: Client[] = [
  { name: "Financial Services Client", icon: FaBuilding },
  { name: "Automotive Client", icon: FaCar },
  { name: "Tech Industry Client", icon: FaLaptopCode },
  { name: "Generic Client 1", icon: FaUsers },
  { name: "Generic Client 2", icon: FaBuilding },
];

export default ClientLogosSection;