video-flow-b/hooks/useBrowserType.ts

import { useState, useEffect } from 'react';

type BrowserType = 'Edge' | 'Chrome' | 'Safari';

/**
 * Detects the browser type on client side
 * @returns {BrowserType} - The detected browser type
 */
export const useBrowserType = (): BrowserType => {
    const [browserType, setBrowserType] = useState<BrowserType>('Safari');

    useEffect(() => {
        const userAgent = navigator.userAgent;
        
        if (userAgent.indexOf('EdgA') !== -1 || userAgent.indexOf('EdgiOS') !== -1) {
            setBrowserType('Edge');
        } else if (userAgent.indexOf('Chrome') !== -1 || userAgent.indexOf('CriOS') !== -1) {
            setBrowserType('Chrome');
        } else {
            setBrowserType('Safari');
        }
    }, []);

    return browserType;
};