import { FC } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Card, { CardBody } from '../bootstrap/Card';
import { TColor } from '../../type/color-type';
import Icon from '../icon/Icon';

interface IPrayerStatsWidgetProps {
	className?: string;
	title: string;
	subtitle?: string | number;
	icon: string;
	iconColor?: TColor;
  description: string;
}
const PrayerStatsWidget: FC<IPrayerStatsWidgetProps> = ({title, subtitle, icon, iconColor, description, ...props}) => {

	return (
		// eslint-disable-next-line react/jsx-props-no-spreading
		<Card {...props} className={classNames(props.className)} stretch>
			<CardBody className='d-flex align-items-center'>
				<div className='flex-grow-1'>
					<div className='fs-5 fw-bold livestream-primary-text'>{title}</div>
					<div className='livestream-secondary-text fw-bold'>{subtitle}</div>

					<div className='row mt-2 g-3 fle-text-accent fw-bold h-6'>
						({description})
					</div>
				</div>
        <div className='flex-shrink-0'>
          <Icon icon={icon} size='3x' color={iconColor} />
        </div>
				
			</CardBody>
		</Card>
	);
};

PrayerStatsWidget.propTypes = {
	className: PropTypes.string,
	title: PropTypes.string.isRequired,
	icon: PropTypes.string.isRequired,
	iconColor: PropTypes.oneOf([
		'primary',
		'secondary',
		'success',
		'info',
		'warning',
		'danger',
		'light',
		'dark',
	]),
};

PrayerStatsWidget.defaultProps = {
	className: undefined,
	subtitle: undefined,
	iconColor: undefined,
};

export default PrayerStatsWidget;