import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import CompanionWindow from '../containers/CompanionWindow';
import CanvasLayers from '../containers/CanvasLayers';

/**
 * a panel showing the canvases for a given manifest
 */
export function LayersPanel({ canvasIds = [], id, windowId }) {
  const { t } = useTranslation();
  return (
    <CompanionWindow title={t('layers')} id={id} windowId={windowId}>
      {canvasIds.map((canvasId, index) => (
        <CanvasLayers canvasId={canvasId} index={index} key={canvasId} totalSize={canvasIds.length} windowId={windowId} />
      ))}
    </CompanionWindow>
  );
}

LayersPanel.propTypes = {
  canvasIds: PropTypes.arrayOf(PropTypes.string),
  id: PropTypes.string.isRequired,
  windowId: PropTypes.string.isRequired,
};