import { cn } from '@/lib/utils';

/** 详情页正中底部麦克风悬浮按钮 */
export function RealtimeCoachButton({ active, onClick }: { active: boolean; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      title={active ? '结束实时教练' : '开启实时教练(旁听患者语音,实时出指导)'}
      className={cn(
        'absolute bottom-4 left-1/2 -translate-x-1/2 z-20 w-12 h-12 rounded-full',
        'shadow-md flex items-center justify-center text-white transition-all duration-200',
        'cursor-pointer active:scale-95',
        active
          ? 'bg-rose-500 hover:bg-rose-600 animate-coachPulse'
          : 'bg-teal-600 hover:bg-teal-700',
      )}
    >
      {active ? (
        <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
          <rect x="6" y="6" width="12" height="12" rx="2" />
        </svg>
      ) : (
        <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
          <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3z" />
          <path d="M19 11a7 7 0 0 1-14 0H3a9 9 0 0 0 8 8.94V23h2v-3.06A9 9 0 0 0 21 11z" />
        </svg>
      )}
    </button>
  );
}
