"use client";

import { useRef } from "react";
import clsx from "clsx";

import { Typography } from "@/components/ui";
import { useChatStore } from "@/providers/chat-store-provider";

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

interface SuggestionsProps {
  className?: string;
  onSuggestionClick: (suggestion: string) => void;
}

export default function Suggestions({
  className,
  onSuggestionClick,
}: SuggestionsProps) {
  const { suggestions } = useChatStore(state => state);
  const suggestionsRef = useRef<HTMLDivElement>(null);

  return (
    <>
      {!!suggestions?.length && (
        <div className={clsx(styles.container, className)} ref={suggestionsRef}>
          {suggestions?.map((suggestion, index) => (
            <div
              key={`suggestion-${index}`}
              className={styles.suggestion}
              onClick={() => {
                onSuggestionClick(suggestion);
              }}
            >
              <Typography
                as="p"
                weight="medium"
                className={styles.suggestionText}
                align="left"
              >
                {suggestion}
              </Typography>
            </div>
          ))}
        </div>
      )}
    </>
  );
}
