'use client';

import * as React from 'react';
import clsx from 'clsx';

import { Experience } from '@/app/ai/_components/sections/Svg';
import { EyeIcon, DatabaseIcon, MysqlIcon } from '@/components/Icon';

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

export default function Performance(props: any) {
  return (
    <section>
      <div className="mx-auto max-w-[1512px] sm:px-8 lg:px-12">
        <div
          className={clsx(
            styles.sectionTopBorder,
            'flex flex-col items-center justify-center gap-4 py-20 lg:px-16 md:gap-8 lg:flex-row',
          )}
        >
          <div className="max-w-[484px] flex-1">
            <h3 className="pb-12 leading-tight">
              Experience Superior Search and AI Performance
              <br />
              with TiDB
            </h3>
            <Experience className="h-auto max-h-[215px] max-w-full" />
          </div>
          <div className="flex-1 space-y-14">
            <ContentWithIcon icon={<EyeIcon />}>
              <h4 className="py-4 text-2xl font-medium leading-tight text-[#98DCFF]">
                Semantic search with high performance and accuracy
              </h4>
              <p>
                Leverage your existing MySQL expertise to seamlessly integrate
                advanced vector search
              </p>
              <ul className="ml-4 mt-4 list-outside list-disc">
                <li>
                  Knowledge graph integration to improve query performance
                </li>
                <li>Auto scaling to support resource-intensive AI workloads</li>
                <li>Columnar data store</li>
              </ul>
            </ContentWithIcon>
            <ContentWithIcon icon={<DatabaseIcon />}>
              <h4 className="py-4 text-2xl font-medium leading-tight text-[#98DCFF]">
                Unified database solution for enhanced developer experience
              </h4>
              <p>
                Simplify your tech stack with a single, scalable database for
                both traditional and AI workloads
              </p>
              <ul className="ml-4 mt-4 list-outside list-disc">
                <li>Serverless to get started instantly</li>
                <li>
                  Supports transactional, analytical and vector search workloads
                </li>
                <li>
                  Native integrations with OpenAI, LlamaIndex, HuggingFace etc.
                </li>
              </ul>
            </ContentWithIcon>
            <ContentWithIcon icon={<MysqlIcon />}>
              <h4 className="py-4 text-2xl font-medium leading-tight text-[#98DCFF]">
                MySQL compatible
              </h4>
              <p>
                Leverage your existing MySQL expertise to seamlessly integrate
                advanced vector search
              </p>
              <ul className="ml-4 mt-4 list-outside list-disc">
                <li>New “Vector” datatype and similarity search indexes</li>
                <li>Store data and vector embeddings together</li>
                <li>
                  Join, index, and query both operational and vector data with
                  SQL
                </li>
              </ul>
            </ContentWithIcon>
          </div>
        </div>
      </div>
    </section>
  );
}

const ContentWithIcon = (props: {
  children: React.ReactNode;
  icon: React.ReactNode;
  className?: string;
}) => {
  const { children, icon, className } = props;

  return (
    <div className={clsx('flex flex-col md:flex-row md:gap-4', className)}>
      <div>{icon}</div>
      <div className="flex-1">{children}</div>
    </div>
  );
};