import { memo } from 'react'

export const Loading = memo(() => (
  <div className='absolute inset-0 flex flex-col items-center justify-center bg-muted animate-[fade-in_0.3s_ease-out] z-[100]'>
    <div className='relative h-[4px] w-[200px] overflow-hidden rounded-full bg-border/50'>
      <div className='absolute inset-y-0 h-full rounded-full bg-primary/40 animate-[loading_1.5s_infinite_linear]' />
    </div>
    <style
      dangerouslySetInnerHTML={{
        __html: `
      @keyframes loading {
        0% { left: -40%; width: 40%; }
        100% { left: 100%; width: 40%; }
      }
      @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }
    `,
      }}
    />
  </div>
))
