function MainComponent() { const [pin, setPin] = React.useState(""); const [participant1Duration, setParticipant1Duration] = React.useState(0); const [participant2Duration, setParticipant2Duration] = React.useState(0); const [isCallActive, setIsCallActive] = React.useState(false); React.useEffect(()=>{ let interval; if (isCallActive) { interval = setInterval(()=>{ setParticipant1Duration((prevDuration)=>prevDuration + 1); setParticipant2Duration((prevDuration)=>prevDuration + 1); }, 1000); } return ()=>clearInterval(interval); }, [ isCallActive ]); const startCall = (e)=>{ e.preventDefault(); if (pin === "1234") { setIsCallActive(true); } }; const formatDuration = (duration)=>{ const hours = Math.floor(duration / 3600); const minutes = Math.floor(duration % 3600 / 60); const seconds = duration % 60; return `${hours}h ${minutes}m ${seconds}s`; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-semibold text-xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "Voice Call Duration Tracker"), !isCallActive && /*#__PURE__*/ React.createElement("form", { onSubmit: startCall, className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "pin", className: "block text-sm font-medium text-[#333] mb-1", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Enter PIN to Start Call"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "pin", name: "pin", className: "font-roboto shadow-sm focus:ring-[#4C9AFF] focus:border-[#4C9AFF] block w-full sm:text-sm border-gray-300 rounded-md", value: pin, onChange: (e)=>setPin(e.target.value), __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#4C9AFF] text-white rounded hover:bg-[#367eed] transition-colors duration-200", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Start Call")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-6", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 w-full sm:w-[300px]", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg text-[#333] mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Participant 1"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Duration: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 46, columnNumber: 56 }, __self: this }, formatDuration(participant1Duration)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 w-full sm:w-[300px]", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg text-[#333] mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Participant 2"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Duration: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 50, columnNumber: 56 }, __self: this }, formatDuration(participant2Duration))))), isCallActive && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsCallActive(false), className: "mt-6 px-4 py-2 bg-[#e3342f] text-white rounded hover:bg-[#cc1f1a] transition-colors duration-200", __source: { fileName: "", lineNumber: 53, columnNumber: 24 }, __self: this }, "End Call")); }