import classNames from 'classnames'

type LoadingProps = {
  className?: string
  message?: string
}

const Loading = ({ className, message }: LoadingProps) => (
  <div
    className={classNames('flex items-center justify-center h-full', className)}
  >
    <svg viewBox="0 0 100 100" className="size-8 fill-pebble" stroke="none">
      <circle cx="6" cy="50" r="6">
        <animateTransform
          attributeName="transform"
          dur="1s"
          type="translate"
          values="0 15 ; 0 -15; 0 15"
          repeatCount="indefinite"
          begin="0.1"
        />
      </circle>
      <circle cx="30" cy="50" r="6">
        <animateTransform
          attributeName="transform"
          dur="1s"
          type="translate"
          values="0 10 ; 0 -10; 0 10"
          repeatCount="indefinite"
          begin="0.2"
        />
      </circle>
      <circle cx="54" cy="50" r="6">
        <animateTransform
          attributeName="transform"
          dur="1s"
          type="translate"
          values="0 5 ; 0 -5; 0 5"
          repeatCount="indefinite"
          begin="0.3"
        />
      </circle>
    </svg>
    {message && <span className="text-stone">{message}</span>}
  </div>
)

export default Loading