import React from 'react';
import { useTheme } from '../../contexts';
import { TLogo } from '../common/TLogo';
import { ThemeToggle } from '../common/ThemeToggle';

export const Header: React.FC = () => {
  const { theme } = useTheme();

  return (
    <header
      className="h-[72px] flex items-center justify-between sticky top-0 z-[100]"
      style={{
        padding: '0 48px',
        borderBottom: `1px solid ${theme.border}`,
        backgroundColor: theme.bg,
      }}
    >
      <div className="flex items-center" style={{ gap: 20 }}>
        <TLogo size={80} />
        <div className="flex items-baseline" style={{ gap: 12 }}>
          <span style={{ fontWeight: 700, fontSize: 20, letterSpacing: '-0.5px', color: theme.text }}>
            T-Systems
          </span>
          <span style={{ fontWeight: 300, fontSize: 16, color: theme.text2 }}>
            Regulation
          </span>
        </div>
      </div>
      <div className="flex items-center" style={{ gap: 16 }}>
        <ThemeToggle />
        <div
          className="flex items-center rounded-lg"
          style={{
            padding: '8px 16px',
            gap: 8,
            backgroundColor: theme.bgHover,
            borderRadius: 8,
          }}
        >
          <span className="mono" style={{ fontSize: 11, color: theme.text3 }}>v1.0.0</span>
          <div style={{ width: 1, height: 12, background: theme.border }} />
          <span className="mono" style={{ fontSize: 12, color: theme.green }}>● ONLINE</span>
        </div>
      </div>
    </header>
  );
};