export function PageLoader({ transparent }: { transparent?: boolean }) {
  return (
    <div className={`page-loader${transparent ? ' page-loader--transparent' : ''}`} role="status" aria-label="Loading">
      <svg
        className="page-loader__tree"
        viewBox="0 0 60 90"
        width="72"
        height="72"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
      >
        {/* Trunk */}
        <rect x="26" y="58" width="8" height="28" rx="4" fill="#A0722A" />
        {/* Side canopy depth */}
        <circle cx="14" cy="52" r="14" fill="#16a34a" />
        <circle cx="46" cy="52" r="14" fill="#16a34a" />
        {/* Main canopy */}
        <circle cx="30" cy="37" r="22" fill="#22c55e" />
        {/* Light highlight */}
        <circle cx="20" cy="27" r="10" fill="#4ade80" opacity="0.6" />
        {/* Top tip */}
        <circle cx="30" cy="17" r="10" fill="#4ade80" />
      </svg>
    </div>
  )
}