/**
 * PageSelector Component
 *
 * Dropdown for selecting the active page in constructor.
 */

import React from 'react';
import type { TourPage } from './types';

interface PageSelectorProps {
  pages: TourPage[];
  activePageId: string;
  onPageChange: (pageId: string) => void;
  disabled?: boolean;
}

const PageSelector: React.FC<PageSelectorProps> = ({
  pages,
  activePageId,
  onPageChange,
  disabled = false,
}) => {
  return (
    <select
      className='rounded border border-gray-300 bg-white px-3 py-2 text-sm'
      value={activePageId}
      onChange={(event) => onPageChange(event.target.value)}
      disabled={disabled}
    >
      {pages.map((page, index) => (
        <option key={page.id} value={page.id}>
          {page.name || `Page ${index + 1}`}
        </option>
      ))}
    </select>
  );
};

export default PageSelector;
