import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./style.scss";
import { getFormatedDate } from "../../utils";
import clsx from "clsx";
import GraduationHat from "../Svg/GraduationHat";
const EducationCardList = ({ 
// iconUrl = "",
iconAltText = "", institue = "", degree = "", from = "", to = "", }) => {
    const className = clsx({
        educationCard: true,
        [iconAltText]: false,
    });
    const showDegreeName = degree?.trim();
    const showInstitute = institue?.trim();
    const showDegreeFrom = showDegreeName && showInstitute;
    return (_jsxs("div", { className: className, children: [_jsx("div", { className: "educationCard--ImagePlaceholder", children: _jsx(GraduationHat, { width: "24", height: "24" }) }), _jsxs("span", { className: "educationCardDetails", children: [_jsxs("p", { className: "degreeName", children: [showDegreeName && degree, showInstitute && (_jsxs("span", { className: "", children: [showDegreeFrom ? " from " : "", institue] }))] }), from && (_jsx("span", { className: "date", children: `${getFormatedDate(from)} - ${getFormatedDate(to)}` }))] })] }));
};
export default EducationCardList;
