import { Button } from '@taroify/core';
import classNames from 'classnames';

import Badge from '@/components/badge';
import { PREFIX } from '@/components/product-dialog/const';

interface IUnableContentProp {
  onConfirm: () => void;
}

export default function GroupNeedBuyContent(props: IUnableContentProp) {
  return (
    <div className={`${PREFIX}__group-need-buy`}>
      <div className={classNames(`${PREFIX}__group-need-buy__top-tips`, 'highlight')}>如您不在群里，可让播络邀请</div>
      <div className={`${PREFIX}__group-need-buy__header`}>
        <div>您的邀请机会</div>
        <div className="highlight">已用完</div>
      </div>
      <div className={`${PREFIX}__group-need-buy__button-container`}>
        <Button className={`${PREFIX}__group-need-buy__button`} onClick={props.onConfirm}>
          购买邀请群数
        </Button>
        <Badge text="限时折扣" />
      </div>
    </div>
  );
}