// @design-system: feedback/EmptyState/illustrations/Page500
import { useT } from '@/lib/i18n/react';

export function Page500() {
  const t = useT('error');
  return (
    <svg
      viewBox="0 0 200 200"
      width="140"
      height="140"
      xmlns="http://www.w3.org/2000/svg"
      aria-label={t('page_500_aria')}
      role="img"
    >
      <circle cx="100" cy="100" r="100" fill="var(--color-illustration-navy)" />
      <text
        x="100"
        y="100"
        textAnchor="middle"
        dominantBaseline="central"
        fontFamily="'Concert One', system-ui, sans-serif"
        fontWeight="400"
        fontSize="96"
        letterSpacing="-3"
        fill="var(--color-illustration-cream)"
      >
        500
      </text>
    </svg>
  );
}