import { useCutsceneStore } from '../../store/cutsceneStore';
import { useShallow } from 'zustand/react/shallow';
import CutsceneProperties from './CutsceneProperties';
import LayerProperties from './LayerProperties';
import SubtitleLines from './SubtitleLines';
import styles from './RightPanel.module.css';

export default function RightPanel() {
  const { selectedLayerIndex, selectLayer } = useCutsceneStore(useShallow(s => ({
    selectedLayerIndex: s.selectedLayerIndex,
    selectLayer: s.selectLayer,
  })));

  return (
    <div className={styles.panel}>
      {/* Tab strip */}
      <div className={styles.tabs}>
        <button
          className={`${styles.tab} ${selectedLayerIndex === null ? styles.tabActive : ''}`}
          onClick={() => selectLayer(null)}
        >
          Cutscene
        </button>
        {selectedLayerIndex !== null && (
          <button className={`${styles.tab} ${styles.tabActive}`}>
            Layer {selectedLayerIndex + 1}
          </button>
        )}
      </div>

      <div className={styles.scroll}>
        {selectedLayerIndex !== null ? (
          <LayerProperties />
        ) : (
          <CutsceneProperties />
        )}
        <SubtitleLines />
      </div>
    </div>
  );
}