import PanelButton from "../PanelButton.js"
import screenrecord from "../../../services/screenrecord.js"
import icons from "../../../lib/icons.js"

export default () => PanelButton({
  class_name: "recorder",
  on_clicked: () => screenrecord.stop(),
  visible: screenrecord.bind("recording"),
  child: Widget.Box({
    children: [
      Widget.Icon(icons.recorder.recording),
      Widget.Label({
        label: screenrecord.bind("timer").as(time => {
          const sec = time % 60
          const min = Math.floor(time / 60)
          return `${min}:${sec < 10 ? "0" + sec : sec}`
        }),
      }),
    ],
  }),
})
