Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react';

import { Card, CardContent, CardHeader, List, Menu, SearchBar } from '@shared/components';
import { ConversationItem } from './ConversationItem';

export const ConversationsList = ({
  conversations = [],
  onSelectConversation,
  onStartConversation
}) => {
  const [search, setSearch] = useState('');

  const filteredConversations = useMemo(() => {
    return conversations.filter((conversation) =>
      conversation.name.toLowerCase().includes(search.toLowerCase())
    );
  }, [conversations, search]);

  return (
    <Card>
      <CardHeader
        title='Conversaciones'
        renderAction={() => (
          <Menu>
            <Menu.Item onClick={onStartConversation}>Iniciar conversación</Menu.Item>
          </Menu>
        )}
      />
      <CardContent styles={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        <SearchBar placeholder='Buscar conversación' onChange={setSearch} />
        <List
          styles={{ maxHeight: '400px', overflow: 'auto' }}
          items={filteredConversations}
          keyExtractor={(item) => item.uuid}
          emptyMessage='No hay conversaciones'
          renderItem={(conversation) => (
            <ConversationItem
              conversation={conversation}
              onSelectConversation={onSelectConversation}
            />
          )}
        />
      </CardContent>
    </Card>
  );
};