import React from 'react';
import type { DashboardData } from '../../types';

interface TopbarProps {
  data: DashboardData;
}

export const Topbar: React.FC<TopbarProps> = ({ data }) => {
  const i18n = (data?.i18n || {}) as unknown as Record<string, string>;
  const global = (data?.global || {}) as unknown as Record<string, string>;
  const statusLabel = i18n.freeVersion || 'Free';
  const versionText = i18n.labelVersion || 'Version';

  return (
    <div className="wawp_top-bar relative sticky top-0 flex items-center justify-between px-5 py-2.5 bg-[#004449] text-white z-[99999] shadow-none border-b border-emerald-900/30">
      <div className="flex items-center gap-4">
        {/* Wawp Brand Logo */}
        <div className="flex items-center gap-2.5">
          <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7 0C7.55228 0 8 0.447715 8 1V3H16V1C16 0.447715 16.4477 0 17 0H19C19.5523 0 20 0.447715 20 1V3C22.2091 3 24 4.79086 24 7V17C24 19.2091 22.2091 21 20 21H17C17 21 14 24 12 24C10 24 7 21 7 21H4C1.79086 21 1.61067e-08 19.2091 0 17V7C0 4.79086 1.79086 3 4 3V1C4 0.447715 4.44772 0 5 0H7ZM4 5C2.89543 5 2 5.89543 2 7V17C2 18.1046 2.89543 19 4 19H20C21.1046 19 22 18.1046 22 17V7C22 5.89543 21.1046 5 20 5H4ZM9 9C9.55228 9 10 9.44772 10 10V14C10 14.5523 9.55228 15 9 15H7C6.44772 15 6 14.5523 6 14V10C6 9.44772 6.44772 9 7 9H9ZM17 9C17.5523 9 18 9.44772 18 10V14C18 14.5523 17.5523 15 17 15H15C14.4477 15 14 14.5523 14 14V10C14 9.44772 14.4477 9 15 9H17Z" fill="#DDFFDD" />
          </svg>
          <span className="font-extrabold text-[16px] tracking-tight text-[#DDFFDD] select-none font-sans">
            Wawp
          </span>
        </div>

        <div className="h-4 w-[1px] bg-white/20" />

        <div className="flex items-center gap-2">
          <span className="text-xs font-medium opacity-80">{String(versionText)} {String(statusLabel)} {global.version || '5.0.0'}</span>
        </div>
      </div>
    </div>
  );
};

export default Topbar;