import { Card, Button } from 'react-bootstrap';
import PropTypes from 'prop-types';
import {useState} from 'react';


export default function CourseCard({courseProp}) {

	// Checks to see if the data was successfully passed
	// Every component receives information in a form of an object
	// console.log(props);
	// console.log(typeof props);

	const {name, description, price} = courseProp;
	const [count,setCount] = useState(0);
	const [seats, setSeats] = useState(30)
	const message = 'the seats are full';

	function enroll(){

		if (seats > 0) {
  setCount(count + 1);
  setSeats(seats - 1);
} else {
  alert('No more seats available');
}

 }

	return (
		<Card>
			<Card.Body>
				<Card.Title>{name}</Card.Title>
				<Card.Subtitle>Description:</Card.Subtitle>
				<Card.Text>{description}</Card.Text>
				<Card.Subtitle>Price:</Card.Subtitle>
				<Card.Text>{price}</Card.Text>
				<Card.Text>Enrollees: {count}</Card.Text>
			// 	<Button variant="primary"onClick = {enroll}>Enroll</Button>
			// </Card.Body>
			<Button variant="primary"onClick = {enroll}>Enroll</Button>
			</Card.Body>
		</Card>

	);
}

// 
// Check if the CourseCard component is getting the correct prop types
// CourseCard.propTypes = {
// 	// The "shape" method is used to check if a prop object conforms to a specific shape
// 	courseProp: PropTypes.shape({
// 		// Define the properties and their expected types
// 		name: PropTypes.string.isRequired,
// 		description: PropTypes.string.isRequired,
// 		price: PropTypes.number.isRequired
// 	})
// }
