import React, { useEffect, useState } from 'react'

// Right end of every tab bar: maximise / restore this group.
export default function GroupActions({ api, containerApi }) {
  const [max, setMax] = useState(() => api.isMaximized())
  useEffect(() => {
    const d = containerApi.onDidMaximizedGroupChange?.(() => setMax(api.isMaximized()))
    return () => d?.dispose?.()
  }, [api, containerApi])
  const toggle = e => { e.stopPropagation(); if (api.isMaximized()) api.exitMaximized(); else api.maximize(); setMax(api.isMaximized()) }
  return (
    <div className="groupactions" onPointerDown={e => e.stopPropagation()}>
      <button className="gbtn" onClick={toggle} title={max ? 'restore' : 'maximise this window'}>{max ? '🗗' : '⛶'}</button>
    </div>
  )
}