components/Header.tsx

import React from 'react';
import { BluetoothIcon } from './icons.tsx';

export const Header: React.FC = () => {
    return (
        <header className="bg-slate-800/50 backdrop-blur-sm border-b border-slate-700/50 sticky top-0 z-10">
            <div className="container mx-auto p-4 flex items-center justify-center space-x-4">
                <BluetoothIcon className="text-blue-400 h-8 w-8" />
                <div>
                    <h1 className="text-2xl font-bold text-white tracking-tight">Bluetooth Stereo Sync</h1>
                    <p className="text-sm text-slate-400">Combine multiple speakers into one synchronized audio output.</p>
                </div>
            </div>
        </header>
    );
}