import React from 'react';
import { usePlatform } from '../platform';
import { TitleBarUpdateIcon } from './UpdateBanner';

const TitleBar = () => {
    const { windowControls, features } = usePlatform();

    if (!features.hasWindowControls) return null;

    return (
        <div className="titlebar">
            <div className="titlebar-drag-region" />
            <div className="titlebar-title">Brycord</div>
            <div className="titlebar-buttons">
                <TitleBarUpdateIcon />
                <button
                    className="titlebar-btn titlebar-minimize"
                    onClick={() => windowControls.minimize()}
                    aria-label="Minimize"
                >
                    <svg width="12" height="12" viewBox="0 0 12 12">
                        <rect fill="currentColor" width="10" height="1" x="1" y="6" />
                    </svg>
                </button>
                <button
                    className="titlebar-btn titlebar-maximize"
                    onClick={() => windowControls.maximize()}
                    aria-label="Maximize"
                >
                    <svg width="12" height="12" viewBox="0 0 12 12">
                        <rect fill="none" stroke="currentColor" strokeWidth="1" width="8" height="8" x="2" y="2" />
                    </svg>
                </button>
                <button
                    className="titlebar-btn titlebar-close"
                    onClick={() => windowControls.close()}
                    aria-label="Close"
                >
                    <svg width="12" height="12" viewBox="0 0 12 12">
                        <polygon fill="currentColor" points="11,1.576 10.424,1 6,5.424 1.576,1 1,1.576 5.424,6 1,10.424 1.576,11 6,6.576 10.424,11 11,10.424 6.576,6" />
                    </svg>
                </button>
            </div>
        </div>
    );
};

export default TitleBar;
