"use client";

import Image from "next/image";

import styles from "./chat-input-action-panel.module.css";

export interface ChatInputActionPanelProps {
  voiceMinutesRemaining: number;
  onVoiceMessageClick?: () => void;
}

export function ChatInputActionPanel({
  voiceMinutesRemaining,
  onVoiceMessageClick,
}: ChatInputActionPanelProps) {
  return (
    <div className={styles.panel}>
      <button
        type="button"
        className={styles.voiceCard}
        onClick={onVoiceMessageClick}
        aria-label={`Voice message, ${voiceMinutesRemaining} minutes remaining`}
      >
        <Image
          src="/images/chat/ic_voicemessage_act.png"
          alt=""
          width={78}
          height={78}
          className={styles.voiceIcon}
          aria-hidden="true"
        />
        <span className={styles.voiceTitle}>voice message</span>
        <span className={styles.voiceMinutes}>({voiceMinutesRemaining}min)</span>
      </button>
    </div>
  );
}
