'use client';

import * as React from 'react';
import clsx from 'clsx';
import NextImage from 'next/image';

import styles from './section.module.css';

const LogoList = [
  { name: 'llamaIndex', width: 290, height: 57 },
  { name: 'dify', width: 194, height: 71 },
  { name: 'leptonAI', width: 268, height: 66 },
  { name: 'langChain', width: 294, height: 44 },
  { name: 'jido', width: 162, height: 69 },
  { name: 'bentoML', width: 214, height: 93 },
  { name: 'npiAI', width: 209, height: 67 },
  { name: 'hugging', width: 280, height: 52 },
  { name: 'openAI', width: 194, height: 52 },
  { name: 'cohere', width: 245, height: 43 },
];

export default function Integration(props: any) {
  return (
    <section>
      <div className="mx-auto max-w-[1512px] sm:px-8 lg:px-12">
        <div className={clsx(styles.sectionTopBorder, 'py-20')}>
          <h3 className="pb-6 text-center leading-tight">
            Comprehensive ecosystem of AI Integrations
          </h3>
          <p className="text-center text-base">
            Simplify your development process by leveraging TiDB&apos;s seamless
            integrations with leading AI vendors and frameworks
          </p>
          <div className="mx-auto mt-16 grid grid-cols-2 md:flex flex-wrap items-center justify-center gap-8 lg:gap-12 lg:max-w-5xl">
            {LogoList.map((item) => (
              <ImageItemWrapper key={item.name}>
                <NextImage
                  src={`/ai/${item.name}.png`}
                  alt={item.name}
                  width={item.width}
                  height={item.height}
                />
              </ImageItemWrapper>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const ImageItemWrapper = (props: { children?: React.ReactNode }) => {
  const { children } = props;

  return <div className="flex items-center justify-center">{children}</div>;
};