import clsx from 'clsx';
import NextImage from 'next/image';

import styles from './equity.module.scss';

export default function Equity(props: {
  className?: string;
  titleClassName?: string;
  equityList: { image: string; title: string; desc: string }[];
  title?: string;
}) {
  return (
    <section className={clsx('section', props.className)}>
      <div className="contain">
        <h2 className={props.titleClassName}>{props.title || '合作伙伴权益'}</h2>
        <div
          className={clsx(styles.equity, {
            [styles.three]: props.equityList.length === 3,
          })}
        >
          {props.equityList.map(
            (item: { image: string; title: string; desc: string }) => (
              <div className={styles.equityCard} key={item.image}>
                <NextImage src={item.image} width={40} height={40} alt={''} />
                <h4>{item.title}</h4>
                <p>{item.desc}</p>
              </div>
            ),
          )}
        </div>
      </div>
    </section>
  );
}

const LogoItem = (props: { logoList: string[] }) => {
  return (
    <div className={styles.logo}>
      {props.logoList.map((item: string) => (
        <NextImage
          src={`/partner/${item}.jpeg`}
          alt={item}
          width={139}
          height={40}
          key={item}
        />
      ))}
    </div>
  );
};