import React, { useState } from 'react';
import { useCameraPermission } from '../hooks/useCameraPermission';

export const CameraPermissionButton: React.FC = () => {
  const { permissionState, requestPermission } = useCameraPermission();
  const [message, setMessage] = useState<string | null>(null);

  const handleClick = async () => {
    if (typeof window !== 'undefined') {
      const state = await requestPermission();
      if (state === 'granted') {
        setMessage(null);  // Clear any previous messages
      } else if (state === 'denied') {
        setMessage('Permission denied. Please enable camera permission in your browser settings.');
      }
    }
  };

  return (
    <div className="space-y-4">
      <button
        className="bg-gray-500 text-sm p-2 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-400"
        onClick={handleClick}
        disabled={permissionState === 'denied'}
      >
        Request Camera Permission ({permissionState})
      </button>
      {message && <p className="text-red-600">{message}</p>}
    </div>
  );
};