import React from "react";
import { ChevronDown } from "lucide-react";

interface ScrollToBottomButtonProps {
  onClick: () => void;
  /** Label shown next to the icon. Defaults to "回到底部". */
  label?: string;
  /** Tailwind classes appended to the default positioning. */
  className?: string;
}

/**
 * Pill-shaped floating button shown when the user has scrolled up away from
 * the bottom of a streamed conversation. Click → smooth-scroll back to the
 * bottom and resume auto-follow.
 *
 * Positioning is `absolute` — render inside a `relative` wrapper so it
 * floats over the scroll container's lower-center without scrolling along
 * with content.
 */
export const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({
  onClick,
  label = "回到底部",
  className = "",
}) => (
  <button
    type="button"
    onClick={onClick}
    className={`absolute left-1/2 -translate-x-1/2 bottom-3 z-10 bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-[11px] font-bold px-3 py-1.5 rounded-full shadow-lg shadow-slate-900/10 flex items-center gap-1 transition active:scale-95 ${className}`}
    aria-label={label}
  >
    <ChevronDown className="w-3.5 h-3.5" />
    {label}
  </button>
);