import * as React from 'react';
import { Button, Card, Col, Modal, Row } from 'antd';
import { RocketOutlined, CloudServerOutlined } from '@ant-design/icons';

interface Props {
    open: boolean,
    onClickConfirm: (type: number) => void,
};

const EntryModal: React.FC<Props> = (props: Props) => {
    const {
        open,
        onClickConfirm
    } = props;

    return (
        <Modal
            className="model-selector-modal"
            width={1000}
            title='请选择大模型服务类型'
            destroyOnClose={true}
            closeIcon={false}
            maskClosable={false}
            centered={true}
            open={open}
            footer={null}
        >
            <Row gutter={[32, 32]} justify="center">
                <Col xs={24} sm={12} md={12} lg={12}>
                    <Card
                        hoverable
                        className="route-option deepseek"
                        cover={
                            <div className="logo-container">
                                <RocketOutlined className="option-icon" />
                            </div>
                        }
                    >
                        <Card.Meta
                            title="建科本地化大模型"
                            description="安全、可控的本地化的大模型服务，创建企业私有的知识库与智能问答"
                        />
                        <Button
                            type="primary"
                            block
                            className="select-button"
                            onClick={() => {
                                onClickConfirm(1);
                            }}
                        >
                            立即使用
                        </Button>
                    </Card>
                </Col>

                <Col xs={24} sm={12} md={12} lg={12}>
                    <Card
                        hoverable
                        className="route-option zhipu"
                        cover={
                            <div className="logo-container">
                                <CloudServerOutlined className="option-icon" />
                            </div>
                        }
                    >
                        <Card.Meta
                            title="线上模型智谱AI"
                            description="线上的大模型服务，无需本地部署即可使用"
                        />
                        <Button
                            type="primary"
                            block
                            className="select-button"
                            onClick={() => {
                                onClickConfirm(2);
                            }}
                        >
                            立即使用
                        </Button>
                    </Card>
                </Col>
            </Row>
        </Modal>
    );
};

export default EntryModal;