import { DownOutlined } from "@ant-design/icons";
import { Dropdown, Menu, Space, Typography } from "antd";
import React from "react"

interface Props {
    value: '1' | '0'
    onChange?: (value: string) => void
}
/**
 * 是否组件
 * @returns 
 */
const IsTrue: React.FC<Props> = ({ value, onChange }) => {

    const menu = (
        <Menu selectedKeys={[value]} onClick={({ key }) => { onChange?.(key) }}>
            <Menu.Item key='1' disabled={value === '1'}>是</Menu.Item>
            <Menu.Item key='0' disabled={value === '0'}>否</Menu.Item>
        </Menu>
    );

    return <Dropdown overlay={menu} trigger={['click']}>
        <Typography.Link>
            <Space style={{ fontSize: 12 }} size={4}>
                {{ '1': '是', '0': '否' }[value]}
                <DownOutlined style={{ fontSize: 12 }} />
            </Space>
        </Typography.Link>
    </Dropdown>
}

export default React.memo(IsTrue)