import React from "react";
import './card.css';

type Props = {
    cardTitle: string,
    cardSubTitle?: string
    cardContent: string,
    buttonShow?: boolean,
    buttonLabel?: string,
    image?: string
}

const Card = (props:Props) => {
    const {cardTitle, cardContent, buttonShow, buttonLabel, image, cardSubTitle} = props;
    return (
        <div className="card">
            { image &&
                <div className="card-image">
                    <img src={image} alt="card" />
                </div>
            }
            <div className="card-header">
                <h2>{cardTitle}</h2>
            </div>
            <div className="card-body">
                <h6 className="card-sub-title">{cardSubTitle}</h6>
                <p>{cardContent}</p>
            </div>
            <div className="card-footer">
                {buttonShow && <button type="button">{buttonLabel}</button>}
            </div>
        </div>
    );
};

export default Card;