"use client";

import { Heart, Sparkles } from "lucide-react";

import type { ChatSupportCtaKind } from "../chat-support-cta";

export interface ChatSupportButtonProps {
  kind: ChatSupportCtaKind;
  label: string;
  onClick: () => void;
}

export function ChatSupportButton({
  kind,
  label,
  onClick,
}: ChatSupportButtonProps) {
  const Icon = kind === "support" ? Heart : Sparkles;
  return (
    <button
      type="button"
      data-analytics-key="chat.support_character"
      data-support-state={kind}
      className="inline-flex min-h-9 max-w-full items-center justify-center gap-1.5 rounded-full border border-[rgba(255,255,255,0.22)] bg-[linear-gradient(135deg,rgba(246,87,160,0.96),rgba(255,119,84,0.94))] px-3 py-1.5 text-center text-[12px] font-extrabold leading-tight text-white shadow-[0_8px_24px_rgba(246,87,160,0.3)] backdrop-blur-md transition active:scale-95"
      aria-label={label}
      onClick={onClick}
    >
      <Icon className="shrink-0" size={14} strokeWidth={2.5} aria-hidden="true" />
      <span className="whitespace-normal text-balance">{label}</span>
    </button>
  );
}
