import * as React from 'react';
import { GreenPage } from '../types';
import { Icon } from './ui/Icon';

interface PageSwitcherProps {
    pages: GreenPage[];
    activePageId: string;
    onSelectPage: (id: string) => void;
    onCreatePage: () => void;
}

const PageSwitcher: React.FC<PageSwitcherProps> = ({ pages, activePageId, onSelectPage, onCreatePage }) => {
    const activePage = pages.find(p => p.id === activePageId);

    return (
        <div>
            <div className="flex items-center space-x-3 mb-4">
                <div className="bg-gradient-to-r from-green-400 to-blue-500 p-2 rounded-lg">
                    <Icon className="h-8 w-8 text-white">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </Icon>
                </div>
                <h1 className="text-xl font-bold text-white">GreenPage AI</h1>
            </div>
            <div className="relative">
                <select
                    value={activePageId}
                    onChange={(e) => onSelectPage(e.target.value)}
                    className="w-full bg-gray-700 border border-gray-600 text-white text-sm font-semibold rounded-lg focus:ring-brand-primary focus:border-brand-primary block p-2.5 appearance-none"
                >
                    {pages.map(page => (
                        <option key={page.id} value={page.id}>{page.name}</option>
                    ))}
                </select>
                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
                    <Icon className="w-4 h-4"><path d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></Icon>
                </div>
            </div>
            <button
                onClick={onCreatePage}
                className="mt-3 w-full flex items-center justify-center gap-2 text-sm text-gray-300 bg-gray-700/50 hover:bg-gray-700 py-2 rounded-lg transition-colors"
            >
                <Icon className="w-4 h-4"><path d="M12 4v16m8-8H4" /></Icon>
                Create New Page
            </button>
        </div>
    );
};

export default PageSwitcher;