import { CardSkeleton } from './CardSkeleton';
import { CardVacia } from './CardVacia';
import { CardError } from './CardError';
import { CardContent } from './CardContent';

/**
 * Componente Card inteligente que maneja automáticamente los estados:
 * - loading: muestra CardSkeleton
 * - error: muestra CardError
 * - sin datos: muestra CardVacia
 * - con datos: muestra CardContent (variante unificada)
 *
 * @param {boolean} loading - Si está cargando, muestra el skeleton
 * @param {string|null} error - Si hay error, muestra CardError con este mensaje
 * @param {boolean} hasData - Si tiene datos para mostrar
 * @param {any} data - Los datos a mostrar (opcional, se usa para detectar si hay datos)
 * @param {string} variant - Variante: 'corto' | 'largo' | 'cortoMasEstado' | 'largoMasEstado' (solo afecta default de title y si se muestra status)
 * @param {string} title - Título de la card
 * @param {string} status - Badge o texto de estado (cuando variant incluye estado o statusAsBadge)
 * @param {string} errorMessage - Mensaje personalizado para el error
 * @param {ReactNode} children - Contenido de la card
 * @param {ReactNode} actions - Contenido del pie (ej. botones)
 * @param {number|string} width - Ancho opcional de la card
 * @param {number|string} height - Alto opcional de la card
 * @param {function} onClick - Callback al hacer click en la card (la hace interactiva)
 * @param {string} ariaLabel - Etiqueta de accesibilidad cuando hay onClick
 * @param {string} titleVariant - 'default' (20px) | 'small' (14px)
 * @param {boolean} statusAsBadge - Si true, renderiza status con Badge
 * @param {string} statusVariant - Variante del Badge cuando statusAsBadge
 */
export const Card = ({
  loading = false,
  error = null,
  hasData = null,
  data = null,
  variant = 'corto',
  title = 'Notificaciones',
  status = null,
  errorMessage = null,
  children = null,
  actions = null,
  width,
  height,
  onClick,
  ariaLabel,
  titleVariant = 'default',
  statusAsBadge = false,
  statusVariant = 'default',
  className = '',
  style = {},
  ...props
}) => {
  if (loading) {
    return <CardSkeleton className={className} width={width} height={height} style={style} />;
  }

  if (error) {
    return (
      <CardError
        title={title}
        errorMessage={errorMessage || error}
        className={className}
      />
    );
  }

  const hasDataToShow = hasData !== null
    ? hasData
    : data !== null && data !== undefined && data !== '';

  if (!hasDataToShow) {
    return (
      <CardVacia
        title={title}
        className={className}
      />
    );
  }

  const showStatus = variant === 'cortoMasEstado' || variant === 'largoMasEstado';
  return (
    <CardContent
      title={title}
      titleVariant={titleVariant}
      status={showStatus ? status : null}
      statusAsBadge={statusAsBadge}
      statusVariant={statusVariant}
      children={children}
      actions={actions}
      width={width}
      height={height}
      onClick={onClick}
      ariaLabel={ariaLabel}
      className={className}
      style={style}
      {...props}
    />
  );
};

export default Card;
