import { MyBetaModalFormProps, MyButtons } from '@/common';
import { ProCard } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';

export default function CustomerEnd(props: MyBetaModalFormProps) {
  const navigate = useNavigate();
  return (
    <div>
      <ProCard title="客户端小程序配置" bordered headerBordered gutter={16}>
        <ProCard
          title="品牌主色、全局渐变色配置"
          type="inner"
          bordered
          extra={
            <MyButtons.Default
              title="去配置"
              type="primary"
              size="small"
              onClick={() => {
                navigate(
                  `/company/list/pages/set_page_info?id=${props?.item?.id}`,
                );
              }}
            />
          }
        >
          <div style={{ height: '80px' }}>
            替换系统默认的金刚区图标，将图标颜色统一调整为机构主色，保持视觉格一致
          </div>
        </ProCard>
        <ProCard
          title="金刚区图标配置"
          type="inner"
          bordered
          extra={
            <MyButtons.Default title="去配置" type="primary" size="small" />
          }
        >
          <div style={{ height: '80px' }}>
            品牌主色是机构在小程序中最核心的视觉代表色。通过配置品牌主色，你可以让整个小程序的交互组件自动统一为机构专属风格，提升品牌识别度。
          </div>
        </ProCard>
      </ProCard>
    </div>
  );
}