'use client'

import React, {useEffect, useState} from "react"
import {WechatFilled} from "@ant-design/icons";
import {Popover, QRCode} from "antd";

import styles from './ShareToWechat.module.sass'

export interface IProps extends React.ComponentPropsWithoutRef<'div'> {
  src?: string
}

export const ShareToWechat: React.FC<IProps> = (props) => {
  const {src} = props
  const [link, setLink] = useState(src ?? 'https://pingcap.cn')
  useEffect(() => {
    if (typeof window !== undefined) setLink(window.location.href)
  }, [])
  return (
    <Popover overlayInnerStyle={{ padding: 0 }} content={(
      <div className={styles.card}>
        <p className={styles.card_title}>分享到微信</p>
        <QRCode value={link} bordered={false} />
        <p>打开微信，使用 “扫一扫” <br />即可将网页分享至朋友圈</p>
      </div>
    )}>
      <div className={styles.icon}>
        <WechatFilled className={styles.icon_svg} />
      </div>
    </Popover>
  )
}