import React, { ReactNode } from 'react';
import classNames from 'classnames/bind';
import styles from './ButtonOption.scss';
import CreateStatus from '@src/components/common/CreateStatus';

const cx = classNames.bind(styles);

interface IOwnProps {
  title: string;
  buttonText: string;
  desc?: string;
  isSelected?: boolean;
  isDisabled?: boolean;
  onClick?: () => void;
  children: ReactNode;
}

const ButtonOption: React.FC<IOwnProps> = ({
  title,
  desc,
  children,
  buttonText,
  isSelected,
  isDisabled,
  onClick,
}) => {
  return (
    <button type="button" className={cx('btn_option')} aria-pressed={isSelected} aria-disabled={isDisabled} disabled={isDisabled} onClick={onClick}>
      <div className={cx('thumb')}>
        {children}
      </div>
      <div className={cx('title')}>{title}</div>
      {desc && (
        <div className={cx('desc')}>{desc}</div>
      )}
      <CreateStatus text={buttonText} isSelected={isSelected} isDisabled={isDisabled} />
    </button>
  );
};

export default ButtonOption;
