"use client";

import { useEffect, useRef } from "react";

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

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

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

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

  useEffect(() => {
    setSuggestionsHeight(suggestionsRef.current?.clientHeight ?? 0);
  }, [setSuggestionsHeight, suggestions]);

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