import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { Collapse, Divider, Typography, makeStyles } from "@material-ui/core";
import PropTypes from "prop-types";
//#region src/UI/surfaces/cards/newsCard/NewsCard.jsx
const useStyles = makeStyles((theme) => ({
	root: { "&:hover": {
		backgroundColor: theme.palette.secondary.main,
		color: theme?.palette?.getContrastText(theme.palette.secondary.main)
	} },
	title: {
		lineHeight: 1.2,
		marginBottom: theme.spacing(1.5)
	},
	number: {
		marginRight: 16,
		paddingLeft: 16
	},
	divider: {
		width: "100%",
		marginTop: 16
	}
}));
const NewsCard = (t0) => {
	const $ = c(48);
	const { number, title, summary, width, component: t1 } = t0;
	const component = t1 === void 0 ? "h2" : t1;
	const [expanded, setExpanded] = useState(false);
	const classes = useStyles();
	const t2 = classes.root;
	const t3 = summary.length > 56 && "pointer";
	let t4;
	if ($[0] !== t3) {
		t4 = { cursor: t3 };
		$[0] = t3;
		$[1] = t4;
	} else t4 = $[1];
	let t5;
	if ($[2] !== expanded) {
		t5 = () => setExpanded(!expanded);
		$[2] = expanded;
		$[3] = t5;
	} else t5 = $[3];
	const t6 = width === "double" ? 560 : 260;
	let t7;
	if ($[4] !== t6) {
		t7 = {
			width: t6,
			display: "flex",
			marginTop: 16,
			paddingRight: 16
		};
		$[4] = t6;
		$[5] = t7;
	} else t7 = $[5];
	let t8;
	if ($[6] !== number) {
		t8 = /* @__PURE__ */ React.createElement(Typography, { variant: "h2" }, number);
		$[6] = number;
		$[7] = t8;
	} else t8 = $[7];
	let t9;
	if ($[8] !== classes.number || $[9] !== t8) {
		t9 = /* @__PURE__ */ React.createElement("div", { className: classes.number }, t8);
		$[8] = classes.number;
		$[9] = t8;
		$[10] = t9;
	} else t9 = $[10];
	let t10;
	if ($[11] !== classes.title || $[12] !== component || $[13] !== title) {
		t10 = /* @__PURE__ */ React.createElement(Typography, {
			variant: "subtitle2",
			component,
			className: classes.title
		}, title);
		$[11] = classes.title;
		$[12] = component;
		$[13] = title;
		$[14] = t10;
	} else t10 = $[14];
	const t11 = width !== "double" && 40;
	let t12;
	if ($[15] !== t11) {
		t12 = { minHeight: t11 };
		$[15] = t11;
		$[16] = t12;
	} else t12 = $[16];
	let t13;
	if ($[17] !== summary) {
		t13 = summary.slice(0, 57);
		$[17] = summary;
		$[18] = t13;
	} else t13 = $[18];
	const t14 = summary.length > 56 && !expanded && "...";
	let t15;
	if ($[19] !== t12 || $[20] !== t13 || $[21] !== t14) {
		t15 = /* @__PURE__ */ React.createElement(Typography, { style: t12 }, t13, " ", t14);
		$[19] = t12;
		$[20] = t13;
		$[21] = t14;
		$[22] = t15;
	} else t15 = $[22];
	let t16;
	if ($[23] !== t10 || $[24] !== t15) {
		t16 = /* @__PURE__ */ React.createElement("div", null, t10, t15);
		$[23] = t10;
		$[24] = t15;
		$[25] = t16;
	} else t16 = $[25];
	let t17;
	if ($[26] !== summary) {
		t17 = summary.slice(57);
		$[26] = summary;
		$[27] = t17;
	} else t17 = $[27];
	let t18;
	if ($[28] !== t17) {
		t18 = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, null, t17));
		$[28] = t17;
		$[29] = t18;
	} else t18 = $[29];
	let t19;
	if ($[30] !== expanded || $[31] !== t18) {
		t19 = /* @__PURE__ */ React.createElement(Collapse, {
			in: expanded,
			timeout: "auto",
			unmountOnExit: true
		}, t18);
		$[30] = expanded;
		$[31] = t18;
		$[32] = t19;
	} else t19 = $[32];
	let t20;
	if ($[33] !== t16 || $[34] !== t19) {
		t20 = /* @__PURE__ */ React.createElement("div", null, t16, t19);
		$[33] = t16;
		$[34] = t19;
		$[35] = t20;
	} else t20 = $[35];
	let t21;
	if ($[36] !== t20 || $[37] !== t7 || $[38] !== t9) {
		t21 = /* @__PURE__ */ React.createElement("div", { style: t7 }, t9, t20);
		$[36] = t20;
		$[37] = t7;
		$[38] = t9;
		$[39] = t21;
	} else t21 = $[39];
	let t22;
	if ($[40] !== classes.divider) {
		t22 = /* @__PURE__ */ React.createElement(Divider, { className: classes.divider });
		$[40] = classes.divider;
		$[41] = t22;
	} else t22 = $[41];
	let t23;
	if ($[42] !== classes.root || $[43] !== t21 || $[44] !== t22 || $[45] !== t4 || $[46] !== t5) {
		t23 = /* @__PURE__ */ React.createElement("div", {
			className: t2,
			style: t4,
			onClick: t5
		}, t21, t22);
		$[42] = classes.root;
		$[43] = t21;
		$[44] = t22;
		$[45] = t4;
		$[46] = t5;
		$[47] = t23;
	} else t23 = $[47];
	return t23;
};
NewsCard.propTypes = {
	number: PropTypes.number.isRequired,
	title: PropTypes.string.isRequired,
	component: PropTypes.string,
	summary: PropTypes.string.isRequired,
	width: PropTypes.string
};
NewsCard.defaultProps = { component: "h2" };
//#endregion
export { NewsCard };

//# sourceMappingURL=NewsCard.mjs.map