import { Dialog } from '@taroify/core';

import PhoneButton, { IPhoneButtonProps } from '@/components/phone-button';

import './index.less';

interface IProps {
  title?: string;
  onCancel: () => void;
  needPhone?: IPhoneButtonProps['needPhone'];
  onSuccess?: IPhoneButtonProps['onSuccess'];
  onBindPhone?: IPhoneButtonProps['onBindPhone'];
}

const PREFIX = 'login-dialog';

export default function LoginDialog(props: IProps) {
  const { title = '使用播络服务前，请先登录', needPhone, onSuccess, onCancel, onBindPhone } = props;

  return (
    <Dialog open onClose={onCancel}>
      <Dialog.Content>
        <div className={`${PREFIX}__container`}>
          <div className={`${PREFIX}__title`}>{title}</div>
          <PhoneButton
            className={`${PREFIX}__confirm-button`}
            onSuccess={onSuccess}
            onBindPhone={onBindPhone}
            needPhone={needPhone}
          >
            登录
          </PhoneButton>
        </div>
      </Dialog.Content>
    </Dialog>
  );
}