import React from 'react';
import { __ } from '@wordpress/i18n';
import { Plus } from 'lucide-react';
import ConversationList from '../ConversationList';
import ViewHeader from './ViewHeader';

const MessagesView = ({ headerActions, conversations, isLoading, onSelect, selectedId, loadingId, onNewChat, readOnly }) => (
    <div className="aisk-view aisk-messages-view">
        <ViewHeader title={__( 'Messages', 'aisk-ai-chat' )} actions={headerActions} />
        <div className="aisk-view-body">
            {isLoading ? (
                <div className="aisk-empty-state">{__( 'Loading conversations...', 'aisk-ai-chat' )}</div>
            ) : (
                <ConversationList
                    conversations={conversations}
                    onSelect={onSelect}
                    selectedId={selectedId}
                    loadingId={loadingId}
                />
            )}
        </div>
        <div className="aisk-floating-action">
            <button type="button" className="aisk-primary-button" onClick={onNewChat} disabled={readOnly}>
                <Plus size={18} />
                {__( 'New Chat', 'aisk-ai-chat' )}
            </button>
        </div>
    </div>
);

export default MessagesView;