import type { HTMLAttributes } from 'react';
import './loading.css';
import type { LoadingColor, LoadingSize, LoadingThickness, LoadingVariant } from '../types';

export type LoadingProps = {
  variant?: LoadingVariant;
  size?: LoadingSize;
  color?: LoadingColor;
  /** Spinner ring border width; scales pulse dot diameter. */
  thickness?: LoadingThickness;
  animated?: boolean;
  label?: string;
} & Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'>;

export function Loading({
  variant = 'spinner',
  size = 'md',
  color = 'primary',
  thickness = 'normal',
  animated = true,
  label = 'Loading…',
  className,
  ...rest
}: LoadingProps) {
  const root = [
    'ccl-loading',
    `ccl-loading--${variant}`,
    `ccl-loading--${size}`,
    `ccl-loading--color-${color}`,
    `ccl-loading--thick-${thickness}`,
  ];
  if (!animated) root.push('ccl-loading--static');

  const spinner = ['ccl-loading__spinner'];
  if (animated) spinner.push('ccl-loading__spinner--animated');

  const bar = ['ccl-loading__bar'];
  if (animated) bar.push('ccl-loading__bar--animated');

  const pulse = ['ccl-loading__pulse'];
  if (animated) pulse.push('ccl-loading__pulse--animated');

  return (
    <div
      className={[...root, className].filter(Boolean).join(' ')}
      role="status"
      aria-label={label}
      {...rest}
    >
      {variant === 'spinner' ? (
        <div className={spinner.join(' ')}>
          <div className="ccl-loading__spinner-ring" />
        </div>
      ) : null}
      {variant === 'bar' ? (
        <div className="ccl-loading__bar-container">
          <div className={bar.join(' ')} />
        </div>
      ) : null}
      {variant === 'pulse' ? (
        <div className={pulse.join(' ')}>
          <div className="ccl-loading__pulse-dot" />
          <div className="ccl-loading__pulse-dot" />
          <div className="ccl-loading__pulse-dot" />
        </div>
      ) : null}
    </div>
  );
}