'use client';

import React from 'react';
import { cn } from '@/lib/utils';

interface SpinnerProps {
  size?: 'sm' | 'md' | 'lg' | 'xl';
  color?: 'primary' | 'white' | 'accent';
  className?: string;
  fullScreen?: boolean;
}

const sizeClasses = {
  sm: 'h-4 w-4 border-2',
  md: 'h-8 w-8 border-2',
  lg: 'h-12 w-12 border-3',
  xl: 'h-16 w-16 border-4',
};

const colorClasses = {
  primary: 'border-primary/30 border-t-primary',
  white: 'border-white/20 border-t-white',
  accent: 'border-accent/30 border-t-accent',
};

export default function Spinner({ size = 'md', color = 'primary', className, fullScreen = false }: SpinnerProps) {
  const spinner = (
    <div
      className={cn(
        'rounded-full animate-spin',
        sizeClasses[size],
        colorClasses[color],
        className
      )}
    />
  );

  if (fullScreen) {
    return (
      <div className="fixed inset-0 flex items-center justify-center bg-dark/80 backdrop-blur-sm z-50">
        <div className="flex flex-col items-center gap-4">
          {spinner}
          <p className="text-white/60 text-sm animate-pulse">Cargando...</p>
        </div>
      </div>
    );
  }

  return spinner;
}

export function PageLoader() {
  return (
    <div className="flex items-center justify-center min-h-[60vh]">
      <div className="flex flex-col items-center gap-4">
        <div className="h-12 w-12 rounded-full animate-spin border-3 border-primary/30 border-t-primary" />
        <p className="text-white/50 text-sm">Cargando contenido...</p>
      </div>
    </div>
  );
}

export function CardSkeleton() {
  return (
    <div className="flex-shrink-0 w-[200px] md:w-[240px]">
      <div className="aspect-[2/3] rounded-card loading-skeleton" />
      <div className="mt-2 h-4 w-3/4 rounded loading-skeleton" />
      <div className="mt-1 h-3 w-1/2 rounded loading-skeleton" />
    </div>
  );
}

export function RowSkeleton() {
  return (
    <div className="space-y-4">
      <div className="h-6 w-48 rounded loading-skeleton" />
      <div className="flex gap-3 overflow-hidden">
        {Array.from({ length: 7 }).map((_, i) => (
          <CardSkeleton key={i} />
        ))}
      </div>
    </div>
  );
}
