"use client";
import Image from "next/image";
import * as React from "react";

interface BrandsItem {
    id: string;
    name: string;
    logo: string;
}

const brands: BrandsItem[] = [
    {
        id: "1",
        name: "Facebook",
        logo: "/assets/images/brands/facebook.webp",
    },
    {
        id: "2",
        name: "X",
        logo: "/assets/images/brands/x-twitter.png",
    },
    {
        id: "3",
        name: "LinkedIn",
        logo: "/assets/images/brands/linkedin.webp",
    },
    {
        id: "4",
        name: "Chat GPT",
        logo: "/assets/images/brands/chatgpt.webp",
    },
    {
        id: "5",
        name: "Dal E",
        logo: "/assets/images/brands/dall-e-logo.webp",
    },

];

export default function Partners() {

    return (
        <section className="py-20">
            <div className="container px-4 mx-auto max-w-7xl">
                <div className="text-center mb-16">
                    <h2 className="text-3xl font-bold text-gray-900">Trusted by Businesses & Partners Worldwide</h2>
                    <div className="w-20 h-1 mt-2 mx-auto bg-[#6a47ed]"></div>
                </div>

                <div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-6">
                    {brands.map((brand) => (
                        <div key={brand.id} className="flex items-center justify-center">
                            <Image
                                src={brand.logo}
                                alt={brand.name}
                                width={100}
                                height={60}
                                className="opacity-50 hover:opacity-100 transition-opacity"
                            />
                        </div>
                    ))}
                </div>
            </div>
        </section>


    )
}
