"use client";
import { ArrowUp } from "lucide-react";

export interface ChatSendButtonProps {
  disabled: boolean;
  hasContent: boolean;
  onClick: () => void;
  onPointerDownSend: () => void;
}

export function ChatSendButton({
  disabled,
  hasContent,
  onClick,
  onPointerDownSend,
}: ChatSendButtonProps) {
  const isActive = hasContent && !disabled;
  return (
    <button
      type="button"
      data-analytics-ignore
      className={[
        "flex aspect-square size-(--chat-send-button-size,40px) shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-(--color-button-gradient-end,#fc69df) text-white transition-[background,transform] duration-200 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))]",
        isActive
          ? "bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))]"
          : "bg-[#f8a8ce] text-[rgba(255,255,255,0.88)] shadow-none",
      ]
        .filter(Boolean)
        .join(" ")}
      disabled={disabled}
      onPointerDown={(event) => {
        if (event.pointerType === "mouse") return;
        if (disabled) return;
        event.preventDefault();
        if (!hasContent) return;
        onPointerDownSend();
      }}
      onClick={onClick}
      aria-label="Send message"
    >
      <ArrowUp
        className="size-(--icon-size-xl,24px) text-(length:--icon-size-xl,24px) leading-none"
        size={24}
        aria-hidden="true"
      />
    </button>
  );
}
