"use client";

import * as Sentry from "@sentry/nextjs";
import { MessageSquarePlus } from "lucide-react";
import { useEffect, useRef } from "react";
import { useTheme } from "@/contexts/theme-context";
import { useTranslations } from "@/i18n/provider";
import { cn } from "@/lib/utils";

export function SentryFeedbackWidget({ collapsed = false }: { collapsed?: boolean }) {
  const ref = useRef<HTMLButtonElement>(null);
  const t = useTranslations();
  const { theme } = useTheme();

  useEffect(() => {
    const feedback = Sentry.getFeedback();
    feedback?.setTheme(theme);
  }, [theme]);

  useEffect(() => {
    const feedback = Sentry.getFeedback();
    if (!feedback || !ref.current) return;
    return feedback.attachTo(ref.current);
  }, []);

  return (
    <button
      ref={ref}
      type="button"
      title={collapsed ? t("Feedback.label") : undefined}
      aria-label={collapsed ? t("Feedback.label") : undefined}
      className={cn(
        "flex h-10 w-full items-center gap-3 rounded-[var(--button-radius-lg)] px-3 text-base text-secondary transition-colors hover:bg-fill-strong hover:text-primary",
        collapsed && "justify-center"
      )}
    >
      <MessageSquarePlus className="h-5 w-5 shrink-0" strokeWidth={1.9} />
      {collapsed ? null : <span className="whitespace-nowrap">{t("Feedback.label")}</span>}
    </button>
  );
}
