"use client";

import { useRouter } from "next/navigation";

import { Button, Card, Stars, Typography } from "@/components/ui";
import { IChat } from "@/entities/chats/types";
import { Assistant } from "@/entities/dashboard/types";
import { useChatStore } from "@/providers/chat-store-provider";
import { ROUTES } from "@/shared/constants/client-routes";

import styles from "./AdviserCard.module.scss";

type AdviserCardProps = {
  assistant: Assistant;
  chat: IChat | null;
};

export default function AdviserCard({ assistant, chat }: AdviserCardProps) {
  const router = useRouter();
  const { _id, name, photoUrl, rating, reviewCount, description } = assistant;
  const setCurrentChat = useChatStore(state => state.setCurrentChat);

  return (
    <Card
      className={styles.card}
      style={{ backgroundImage: `url(${photoUrl})` }}
      onClick={() => {
        if (chat) {
          setCurrentChat(chat);
        }
        router.push(ROUTES.chat(_id));
      }}
    >
      <div className={styles.content}>
        <div className={styles.info}>
          <div className={styles.name}>
            <Typography color="white" weight="bold">
              {name}
            </Typography>
            <div className={styles.indicator} />
          </div>
          <Typography
            className={styles.description}
            color="white"
            weight="medium"
            size="xs"
          >
            {description}
          </Typography>
          <div className={styles.rating}>
            <Typography color="white" weight="medium" size="xs">
              {rating}
            </Typography>
            <Stars rating={rating} />
            <Typography color="white" weight="medium" size="xs">
              ({reviewCount})
            </Typography>
          </div>
        </div>
        <Button size="sm">
          <Typography color="white" weight="bold" size="sm">
            CHAT | FREE
          </Typography>
        </Button>
      </div>
      <div className={styles.shadow} />
    </Card>
  );
}
