import { IAssistant } from "@/api/resources/Assistants";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import Title from "@/components/Title";

interface IAssistantCardProps extends IAssistant {
  onClickCard: () => void;
}

function AssistantCard({
  name,
  expirience,
  stars,
  photo: { th2x },
  rating,
  onClickCard,
}: IAssistantCardProps) {
  return (
    <div className={styles.container} onClick={onClickCard}>
      <div
        className={styles.header}
        style={{ backgroundImage: `url(${th2x})` }}
      >
        <Title variant="h3" className={styles.name}>
          {name}
          <span className={styles["online-status"]} />
        </Title>
      </div>
      <div className={styles.footer}>
        <span className={styles.experience}>{expirience}</span>
        <div className={styles["rating-container"]}>
          <div className={styles.stars}>
            {Array(stars)
              .fill(0)
              .map((_, index) => (
                <img key={index} src="/star.svg" alt="star" />
              ))}
            <span className={styles.rating}> | {rating}</span>
          </div>
        </div>
        <MainButton className={styles.button}>CHAT | FREE</MainButton>
      </div>
    </div>
  );
}

export default AssistantCard;
