'use client';
import BadgeButton from './BadgeButton';
import AboutButton from './AboutButton';

const PersonIcon = (
  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
    <circle cx="10" cy="6" r="4" fill="white" stroke="white" strokeWidth="1.5" />
    <rect x="3" y="13" width="14" height="5" rx="2.5" fill="white" stroke="white" strokeWidth="1.5" />
  </svg>
);

const InfoIcon = (
  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
    <circle cx="10" cy="10" r="9" stroke="white" strokeWidth="2" />
    <rect x="9" y="8" width="2" height="6" rx="1" fill="white" />
    <rect x="9" y="5" width="2" height="2" rx="1" fill="white" />
  </svg>
);

export default function HeaderButtons() {
  return (
    <div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
      <a href="/admin" target="_self" rel="noopener noreferrer">
        <img
          src="https://img.shields.io/badge/Admin%20Login-000000?style=for-the-badge&logo=lock&logoColor=white&labelColor=8B0000"
          alt="Admin Login"
        />
      </a>
      {/* If your server for about me is running on a different port, change the port number here */}
      <a href={window.location.origin.replace('3000', '80')} target="_self" rel="noopener noreferrer">
        <img
          src="https://img.shields.io/badge/About%20Me-000000?style=for-the-badge&logo=account&logoColor=white&labelColor=2563eb"
          alt="About Me"
        />
      </a>
    </div>
  );
}