import { IAssistant, ICategory } from "@/api/resources/ChatsCategories";
import styles from "./styles.module.scss";
import Title from "@/components/Title";
import Assistant from "../Assistant";

interface IChatsCategoryProps {
  category: ICategory;
  loadingAssistantId: string;
  handleAssistantClick: (assistant: IAssistant) => void;
}

function ChatsCategory({
  category,
  loadingAssistantId,
  handleAssistantClick,
}: IChatsCategoryProps) {
  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.icon}>
          {category.icon?.length && (
            <img src={category.icon} alt={category.title} />
          )}
        </div>
        <Title variant="h2" className={styles.title}>
          {category.title}
        </Title>
      </div>
      <Title variant="h3" className={styles.subtitle}>
        {category.subtitle}
      </Title>
      <ul className={styles.assistants}>
        {category.assistants.map((assistant, index) => (
          <li key={index}>
            <Assistant
              {...assistant}
              isLoading={loadingAssistantId === assistant.id}
              onAssistantClick={handleAssistantClick}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ChatsCategory;
