export function Logo({ size = 16, color }: { size?: number; color?: string }) {
  return (
    <span
      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: color ?? 'var(--ink)' }}
    >
      <svg
        width={size + 6}
        height={size + 6}
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        aria-hidden
      >
        <path d="M2 20 L8 10 L12 16 L16 12 L22 20 Z" />
        <circle cx="18" cy="6" r="2" fill="currentColor" stroke="none" />
      </svg>
      <span
        className="display"
        style={{ fontSize: size, fontWeight: 600, letterSpacing: '-0.01em' }}
      >
        PORTAL MINERÍA
      </span>
      <span
        className="mono"
        style={{
          fontSize: 9,
          padding: '2px 5px',
          border: '1px solid currentColor',
          opacity: 0.5,
          letterSpacing: '0.1em',
        }}
      >
        CL
      </span>
    </span>
  )
}