import React, { useState } from 'react';
import { Typography, Button } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

const { Paragraph } = Typography;

function TextMore({ text, rows }) {
    const [visible, setVisible] = useState(false);

    return (
        <div style={{ position: 'relative' }}>
            <Paragraph
                ellipsis={
                    visible
                        ? false
                        : {
                            rows: rows,
                            expandable: true,
                            symbol: (
                                <Button type='link'
                                    icon={<DownOutlined />}
                                    style={{ visibility: 'hidden' }}>
                                    展开
                                </Button>
                            ),
                        }
                }
            >
                {text}
                {visible && (
                    <Button type='link'
                        icon={<UpOutlined />}
                        onClick={() => setVisible(false)}>
                        收起
                    </Button>
                )}
            </Paragraph>
            {!visible && (
                <div style={{ position: 'absolute', bottom: 0, right: 0 }}>
                    <Button type='link' icon={<DownOutlined />}
                        onClick={() => setVisible(true)}>
                        展开
                    </Button>
                </div>
            )}
        </div>
    );
}

export default TextMore;
