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

const LockIcon = (
  <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
    <path d="M15 8H5C3.89543 8 3 8.89543 3 10V16C3 17.1046 3.89543 18 5 18H15C16.1046 18 17 17.1046 17 16V10C17 8.89543 16.1046 8 15 8Z" fill="white"/>
    <path d="M7 8V5C7 2.79086 8.79086 1 11 1H9C11.2091 1 13 2.79086 13 5V8" stroke="white" strokeWidth="2" strokeLinecap="round"/>
  </svg>
);

const PersonIcon = (
  <svg width="16" height="16" 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>
);

export default function HeaderButtons() {
  return (
    <div className="flex gap-2 justify-center sm:justify-end">
      <a 
        href="/admin" 
        target="_self" 
        rel="noopener noreferrer"
        className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
      >
        <BadgeButton
          label="ADMIN LOGIN"
          color="#000000"
          labelColor="#8B0000"
          icon={LockIcon}
          onClick={() => {}}
        />
      </a>
      <a 
        href="/posts/about" 
        target="_self" 
        rel="noopener noreferrer"
        className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
      >
        <BadgeButton
          label="ABOUT ME"
          color="#000000"
          labelColor="#2563eb"
          icon={PersonIcon}
          onClick={() => {}}
        />
      </a>
    </div>
  );
}