import React from "react";
import { useTranslation } from "react-i18next";
import { Carousel, CarouselContent, CarouselItem } from "../ui/carousel"
import Autoplay from "embla-carousel-autoplay"

const Customers: React.FC = () => {
    const { t } = useTranslation("common");

    return (
        <div>
            <h2 className="text-3xl font-bold text-center mb-12" id="customers">
                {t("customers")}
            </h2>
            <Carousel className="w-full m-3" opts={{
                loop: true,

            }}
                plugins={[
                    Autoplay({
                        delay: 2000,
                    }),
                ]}
            >
                <CarouselContent>
                    <CustomerItem customer={"Goliath National Bank"} />
                    <CustomerItem customer={"LSPD"} />
                    <CustomerItem customer={"University of Sheffield"} />
                    <CustomerItem customer={"Doofemshertz Evil Inc."} />
                    <CustomerItem customer={"Hooli"} />
                    <CustomerItem customer={"Los Pollos Hermanos"} />
                    <CustomerItem customer={"Hamlin, Hamlin & McGill"} />
                </CarouselContent>

            </Carousel>
        </div>
    );
};

function CustomerItem({ customer }: { customer: String }) {
    return (
        <CarouselItem className="basis-1/3 pl-10">
            <div className="bg-gray-600 p-3 rounded-sm">
                <h1 className="text-white override text-center">{customer}</h1>
            </div>
        </CarouselItem>
    )
}

export default Customers;