import React, { ReactNode } from 'react';

interface IconContainerProps {
  children: ReactNode;
  variant?: 'default' | 'primary' | 'telemetry' | 'warning';
}

/**
 * IconContainer - A semantic UI component for wrapping icons.
 */
export function IconContainer({ children, variant = 'default' }: IconContainerProps) {
  const variantClasses = {
    default: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
    primary: 'bg-[var(--ui-color-intent-primary)]/10 border-[var(--ui-color-intent-primary)]/20',
    telemetry: 'bg-[var(--ui-color-intent-telemetry)]/10 border-[var(--ui-color-intent-telemetry)]/20',
    warning: 'bg-[var(--ui-color-intent-warning)]/10 border-[var(--ui-color-intent-warning)]/20',
  };

  return (
    <div className={`w-10 h-10 flex items-center justify-center border ${variantClasses[variant]}`}>
      {children}
    </div>
  );
}