import React from 'react';
import Card from "./Card.jsx";

const ChatsList = (props) => {
    const { chats } = props;

    const colorMap = {
        orange: 'FFA500FF',
        aqua: '00FFFFFF',
        crimson: 'DC143CFF',
        red: 'FF0000FF',
        violet: '8A2BE2FF',
        seagreen: '20B2AAFF',
        green: 'ADFF2FFF',
        blue: '0000FFFF',
        pink: 'FF1493FF',
        cyan: '72FAFAFF'
    }

    function getColor(chatId) {
        const keys = Object.keys(colorMap);
        const index = chatId % keys.length;
        return colorMap[keys[index]];
    }

  return (
      <div className="ChatsList">
          {chats.map((item, index) => (
              <Card
                  key={index}
                  name={item.name}
                  lastMessage={item.lastMessage}
                  id={item.id}
                  color={getColor(item.id)}
              />
          ))}
      </div>
  );
};

export default ChatsList;