export default function BrandMark({ size = 'default' }: { size?: 'default' | 'compact' }) {
  const containerClassName =
    size === 'compact'
      ? 'h-10 w-10 rounded-xl'
      : 'h-11 w-11 rounded-2xl'
  const iconClassName = size === 'compact' ? 'h-6 w-6' : 'h-7 w-7'

  return (
    <span
      className={[
        'relative inline-flex shrink-0 items-center justify-center border border-primary-200/70 bg-white text-primary-600 shadow-[0_10px_30px_rgba(37,99,235,0.10)] transition-transform group-hover:-translate-y-0.5 dark:border-primary-500/20 dark:bg-gray-900 dark:text-primary-400',
        containerClassName,
      ].join(' ')}
    >
      <svg className={iconClassName} viewBox="0 0 32 32" fill="none" aria-hidden>
        <path
          d="M16 4.75 7.5 9.2v9.55L16 23.2l8.5-4.45V9.2L16 4.75Z"
          stroke="currentColor"
          strokeWidth="1.8"
        />
        <path
          d="m7.75 9.45 8.25 4.3 8.25-4.3"
          stroke="currentColor"
          strokeWidth="1.6"
          strokeLinecap="round"
        />
        <path d="M16 13.9v9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        <path
          d="M22.75 6.8c2.35 1.55 3.9 4.2 3.9 7.2"
          stroke="currentColor"
          strokeWidth="1.6"
          strokeLinecap="round"
          opacity=".9"
        />
        <path
          d="M9.35 6.8c-2.3 1.55-3.85 4.2-3.85 7.2"
          stroke="currentColor"
          strokeWidth="1.6"
          strokeLinecap="round"
          opacity=".65"
        />
      </svg>
    </span>
  )
}