"use client";

import { ImagePlus, Mic2, Coffee } from "lucide-react";
import Link from "next/link";

import styles from "./chat-composer-action-menu.module.css";

export interface ChatComposerActionMenuProps {
  id: string;
  disabled?: boolean;
  tipHref: string;
  onImage: () => void;
  onVoice: () => void;
  onNavigate: () => void;
}

export function ChatComposerActionMenu({
  id,
  disabled = false,
  tipHref,
  onImage,
  onVoice,
  onNavigate,
}: ChatComposerActionMenuProps) {
  return (
    <div id={id} className={styles.menu} aria-label="Chat actions">
      <button
        type="button"
        className={styles.action}
        disabled={disabled}
        data-analytics-key="chat.promotion_image"
        onClick={onImage}
      >
        <span className={`${styles.icon} ${styles.imageIcon}`}>
          <ImagePlus size={21} strokeWidth={2} aria-hidden="true" />
        </span>
        <span>Image</span>
      </button>
      <button
        type="button"
        className={styles.action}
        disabled={disabled}
        data-analytics-key="chat.promotion_voice"
        onClick={onVoice}
      >
        <span className={`${styles.icon} ${styles.voiceIcon}`}>
          <Mic2 size={21} strokeWidth={2} aria-hidden="true" />
        </span>
        <span>Voice</span>
      </button>
      <Link
        href={tipHref}
        className={styles.action}
        aria-disabled={disabled}
        tabIndex={disabled ? -1 : undefined}
        data-analytics-key="chat.open_tip"
        onClick={(event) => {
          if (disabled) {
            event.preventDefault();
            return;
          }
          onNavigate();
        }}
      >
        <span className={`${styles.icon} ${styles.tipIcon}`}>
          <Coffee size={21} strokeWidth={2} aria-hidden="true" />
        </span>
        <span>Tip</span>
      </Link>
    </div>
  );
}