/**
 * BoostMedia AI Content Generator Admin - Loader Component
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import { Loader2 } from 'lucide-react'
import { t } from '../../lib/i18n'

interface LoaderProps {
  size?: 'sm' | 'md' | 'lg'
  text?: string
  fullScreen?: boolean
}

const sizeClasses = {
  sm: 'w-4 h-4',
  md: 'w-8 h-8',
  lg: 'w-12 h-12',
}

export function Loader({ size = 'md', text, fullScreen = false }: LoaderProps) {
  const content = (
    <div className="flex flex-col items-center justify-center gap-3">
      <Loader2 className={`${sizeClasses[size]} text-bc-primary animate-spin`} />
      {text && <p className="text-bc-gray-600 text-sm">{text}</p>}
    </div>
  )

  if (fullScreen) {
    return (
      <div className="fixed inset-0 flex items-center justify-center bg-white/80 backdrop-blur-sm z-50">
        {content}
      </div>
    )
  }

  return (
    <div className="flex items-center justify-center p-8">
      {content}
    </div>
  )
}

export function PageLoader() {
  return (
    <div className="flex-1 flex items-center justify-center min-h-[400px]">
      <Loader size="lg" text={t('Loading...')} />
    </div>
  )
}

export function InlineLoader({ text }: { text?: string }) {
  return (
    <span className="inline-flex items-center gap-2 text-bc-gray-600">
      <Loader2 className="w-4 h-4 animate-spin" />
      {text && <span className="text-sm">{text}</span>}
    </span>
  )
}