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

export default function CourseCard({ courseProp }) {
  
  const { name, description, price } = courseProp;

  // Use the state hook to be able to store state (data) in this component
  // States are used to keep track of information related to individual component
  // Syntax:
  /**
   * const [ getter, setterFunction ] = useState(initialGetterValue)
   */

  const [ count, setCount ] = useState(30);
  const enroll = () => {
    if (count > 0) {
      setCount(count - 1);
    } else {
      alert('No More Seats');
    }
  };



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

// Check if the CourseCard component is getting the correct prop types
// PropTypes are used for validating information passed to a component.
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
  }).isRequired // Make sure the entire courseProp object is required
};
