// src/components/MicrophonePermissionButton.tsx
import React, { useState } from 'react';
import { useMicrophonePermission } from '../hooks/useMicrophonePermission';

export interface MicrophonePermissionButtonProps {
  className?: string;
  buttonText?: string;
  onGranted?: () => void;
  onDenied?: () => void;
  messagePermissionDenied?: string;
  messagePermissiononGranted?: string;
}

export const MicrophonePermissionButton: React.FC<MicrophonePermissionButtonProps> = ({
  className = 'bg-gray-500 text-sm p-2 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-400',
  buttonText = 'Microphone Permission',
  onGranted,
  onDenied,
  messagePermissionDenied = 'Permission denied. Please enable camera permission in your browser settings.',

}) => {
  const { permissionState, requestPermission } = useMicrophonePermission();
  const [message, setMessage] = useState<string | null>(null);

  const handleClick = async () => {
    const state = await requestPermission();
    if (state === 'granted' && onGranted) {
      setMessage(null);  // Clear any previous messages
      onGranted();
    } else if (state === 'denied') {
      setMessage(messagePermissionDenied);
      if (onDenied) onDenied();
    }
  };

  return (
    <div className="space-y-4">
      <button
        className={`${className}`}
        onClick={handleClick}
      >
        {buttonText}
      </button>
    </div>
  );
};