'use client';
import BadgeButton from './BadgeButton';
import { useRouter } from 'next/navigation';

const InfoIcon = (
  <svg width="16" height="16" fill="white" viewBox="0 0 16 16" aria-hidden="true">
    <circle cx="8" cy="8" r="8" fill="#2563eb"/>
    <text x="8" y="12" textAnchor="middle" fontSize="9" fill="white" fontWeight="bold" alignmentBaseline="middle">i</text>
  </svg>
);

export default function AboutButton() {
  const router = useRouter();
  return (
    <BadgeButton
      label="ABOUT ME"
      color="#2563eb"
      icon={InfoIcon}
      onClick={() => router.push('/posts/about')}
    />
  );
}
