"use client";

import Image from "next/image";

import styles from "./voice-package-card.module.css";

export interface VoicePackageCardProps {
  /** 已使用分钟数 */
  usedMinutes: number;
  /** 总分钟数 */
  totalMinutes: number;
  /** "Buy Package" 按钮点击 */
  onBuyPackage: () => void;
}

/**
 * Voice Message Package 卡片
 *
 * 视觉规格（与设计稿对齐）：
 *   - 白色卡片 + 粉色→橙色渐变描边
 *   - 标题 "Voice Message Package"（粉色加粗）
 *   - "0min/0min used/remaining" 文案（前缀粉色加粗）
 *   - 底部 "Buy Package" 粉色胶囊按钮
 */
export function VoicePackageCard({
  usedMinutes,
  totalMinutes,
  onBuyPackage,
}: VoicePackageCardProps) {
  return (
    <section className={styles.card}>
      <div className={styles.content}>
        <div className={styles.copy}>
          <header className={styles.header}>
            <h2 className={styles.title}>Voice Message Package</h2>
          </header>

          <p className={styles.usage}>
            <span className={styles.usedNumber}>{usedMinutes}</span>
            <span className={styles.usageUnit}>min/</span>
            <span className={styles.totalNumber}>{totalMinutes}</span>
            <span className={styles.usageUnit}>min</span>
            <span className={styles.usageText}>{"\u00a0\u00a0"}used/remaining</span>
          </p>

          <div className={styles.footer}>
            <button
              type="button"
              className={styles.buyBtn}
              onClick={onBuyPackage}
              aria-label="Buy Package"
            >
              Buy Package
            </button>
          </div>
        </div>

        <div className={styles.micIcon} aria-hidden="true">
          <Image
            src="/images/sidebar/ic_user_voicemessage.png"
            alt=""
            width={100}
            height={100}
            className={styles.micImage}
          />
        </div>
      </div>
    </section>
  );
}