import { useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Button from '../shared/buttons/button';

function OrderAllDecksMessage({ discountPercent, discountPrice, handleOrderAllDecks }) {
  const [show, setShow] = useState(true);

  if (!show) return null;

  return (
    <div
      className={classNames(
        'relative rounded-lg border border-green-400 bg-green-50 p-4',
        'my-8 mx-2 text-center'
      )}
    >
      <button
        className={classNames(
          'absolute top-0 left-0 z-10 float-left mr-auto border-0 bg-transparent p-1 text-3xl font-semibold',
          'leading-none text-black opacity-50 outline-none focus:outline-none'
        )}
        type='button'
        onClick={() => setShow(false)}
      >
        <span className='block h-6 w-6 bg-transparent text-2xl text-black opacity-50 outline-none focus:outline-none'>
          ×
        </span>
      </button>
      <p className='my-3 text-lg font-medium'>
        <span>با خرید تمامی بسته های باقیمانده </span>
        <span className='font-bold text-red-500'>به مدت محدود</span>
        <span> از تخفیف ویژه </span>
        <span className='font-bold text-red-500'>{discountPercent} درصدی</span>
        <span> مدمشاور به ارزش </span>
        <span className='font-bold text-red-500'>{discountPrice.toLocaleString()} ریال</span>
        <span> بهره‌مند می‌شوید.</span>
      </p>
      <p className='my-2'>برای خرید تمامی بسته های باقی مانده دکمه زیر را فشار دهید.</p>
      <Button
        color='green'
        colorWeight={400}
        size='lg'
        className='mx-auto my-4'
        onClick={handleOrderAllDecks}
      >
        خرید همه بسته‌ها
      </Button>
    </div>
  );
}

OrderAllDecksMessage.propTypes = {
  discountPercent: PropTypes.number.isRequired,
  discountPrice: PropTypes.number.isRequired,
  handleOrderAllDecks: PropTypes.func.isRequired
};

export default OrderAllDecksMessage;
