'use client';

import NextImage from 'next/image';
import NextLink from 'next/link';
import * as React from 'react';
import { Select } from 'antd';

import { Banner } from '@/components/Banner/Banner';
import { partnerList } from './data';

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

export default function SearchPartnerPage() {
  const [selectedType, setSelectedType] = React.useState<string>('all');

  const handleChange = (value: string) => {
    setSelectedType(value);
  };

  const filteredPartners =
    selectedType === 'all'
      ? partnerList
      : partnerList.filter((partner) => partner.type.includes(selectedType));

  return (
    <>
      <Banner title="查找合作伙伴" />
      <section className="section" style={{paddingTop:'60px'}}>
        <div className="contain">
          <div className={styles.selectContainer}>
            <Select
              size="large"
              defaultValue="all"
              style={{ width: 300 }}
              options={[
                { value: 'all', label: '全部' },
                {
                  value: 'authorized-distribution-partner',
                  label: '授权经销伙伴',
                },
                { value: 'solution-partner', label: '解决方案伙伴' },
                { value: 'certified-service-partner', label: '认证服务伙伴' },
              ]}
              onChange={handleChange}
            ></Select>
          </div>
          <div className={styles.card}>
            {filteredPartners.map((item) => (
              <div className={styles.cardItem} key={item.title}>
                <NextImage
                  src={`/partner/${item.image}`}
                  width={120}
                  height={40}
                  alt={item.image}
                />
                <h5>{item.title}</h5>
                <p>{item.desc}</p>
                {item.jointUrl && (
                  <p>
                    <NextLink href={item.jointUrl} className="button-link">
                      查看联合解决方案
                    </NextLink>
                  </p>
                )}
                {item.url && (
                  <NextLink href={item.url} className="button-link" target='_blank'>
                    了解更多
                  </NextLink>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}