"use client";

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}>
      <header className={styles.header}>
        <h2 className={styles.title}>Voice Message Package</h2>
        <div className={styles.micIcon} aria-hidden="true">
          <svg
            width="28"
            height="28"
            viewBox="0 0 24 24"
            fill="none"
            className={styles.micGlyph}
          >
            <path
              d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3Z"
              fill="currentColor"
            />
            <path
              d="M19 11a1 1 0 1 0-2 0 5 5 0 0 1-10 0 1 1 0 1 0-2 0 7 7 0 0 0 6 6.92V21a1 1 0 1 0 2 0v-3.08A7 7 0 0 0 19 11Z"
              fill="currentColor"
            />
          </svg>
        </div>
      </header>

      <p className={styles.usage}>
        <span className={styles.usageNumber}>
          {usedMinutes}min/{totalMinutes}min
        </span>
        <span className={styles.usageText}> used/remaining</span>
      </p>

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