{% raw %}/**
 * Icon wrapper component for consistent icon sizing across the application.
 *
 * Uses Lucide React icons with standardized size props.
 *
 * AUTO-GENERATED BY PRISM
 */

import { type ReactElement, type ComponentType } from 'react';
import type { LucideProps } from 'lucide-react';
import { Loader2, Minus, Check, X } from 'lucide-react';

// Re-export commonly used icons for convenience
export {
  // Actions
  Plus,
  Pencil,
  Trash2,
  Save,
  X,
  Check,
  Search,
  Filter,
  Download,
  Upload,
  Copy,
  ExternalLink,

  // Navigation
  ChevronLeft,
  ChevronRight,
  ChevronUp,
  ChevronDown,
  ArrowLeft,
  ArrowRight,
  Menu,
  MoreHorizontal,
  MoreVertical,

  // Status
  AlertCircle,
  AlertTriangle,
  CheckCircle,
  Info,
  HelpCircle,
  XCircle,

  // UI
  Sun,
  Moon,
  Eye,
  EyeOff,
  Settings,
  User,
  Users,
  Home,
  Loader2,
  RefreshCw,

  // Data
  Calendar,
  Clock,
  Mail,
  Phone,
  MapPin,
  Link,
  File,
  FileText,
  Folder,
  Image,
  Database,
  Minus,
} from 'lucide-react';

/** Standard icon sizes */
export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

/** Size to pixel mapping */
const SIZE_MAP: Record<IconSize, number> = {
  xs: 12,
  sm: 16,
  md: 20,
  lg: 24,
  xl: 32,
};

export interface IconProps extends Omit<LucideProps, 'size'> {
  /** The Lucide icon component to render */
  icon: ComponentType<LucideProps>;
  /** Predefined size or custom pixel value */
  size?: IconSize | number;
  /** Additional CSS classes */
  className?: string;
  /** Accessible label for screen readers */
  label?: string;
}

/**
 * Icon wrapper component with consistent sizing.
 *
 * @example
 * ```tsx
 * import { Icon, Pencil, Trash2 } from './Icon';
 *
 * <Icon icon={Pencil} size="sm" />
 * <Icon icon={Trash2} size="lg" className="text-error" />
 * ```
 */
export function Icon({
  icon: IconComponent,
  size = 'md',
  className = '',
  label,
  ...props
}: IconProps): ReactElement {
  const pixelSize = typeof size === 'number' ? size : SIZE_MAP[size];

  return (
    <IconComponent
      size={pixelSize}
      className={className}
      aria-label={label}
      aria-hidden={!label}
      {...props}
    />
  );
}

export interface SpinnerProps {
  /** Spinner size */
  size?: IconSize | number;
  /** Additional CSS classes */
  className?: string;
}

/**
 * Loading spinner component using Lucide's Loader2 icon.
 *
 * @example
 * ```tsx
 * <Spinner size="md" />
 * <Spinner size="lg" className="text-accent" />
 * ```
 */
export function Spinner({ size = 'md', className = '' }: SpinnerProps): ReactElement {
  const pixelSize = typeof size === 'number' ? size : SIZE_MAP[size];

  // Import Loader2 directly since we're in the same file
  return (
    <Loader2
      size={pixelSize}
      className={`animate-spin ${className}`}
      aria-label="Loading"
    />
  );
}

/**
 * Boolean display component - shows check or X based on value.
 *
 * @example
 * ```tsx
 * <BooleanIcon value={true} />
 * <BooleanIcon value={false} size="lg" />
 * ```
 */
export interface BooleanIconProps {
  /** The boolean value to display */
  value: boolean | null | undefined;
  /** Icon size */
  size?: IconSize | number;
  /** Additional CSS classes */
  className?: string;
}

export function BooleanIcon({ value, size = 'md', className = '' }: BooleanIconProps): ReactElement {
  const pixelSize = typeof size === 'number' ? size : SIZE_MAP[size];

  if (value === null || value === undefined) {
    return (
      <Minus
        size={pixelSize}
        className={`text-muted ${className}`}
        aria-label="Not set"
      />
    );
  }

  return value ? (
    <Check
      size={pixelSize}
      className={`text-success ${className}`}
      aria-label="Yes"
    />
  ) : (
    <X
      size={pixelSize}
      className={`text-error ${className}`}
      aria-label="No"
    />
  );
}

export default Icon;
{% endraw %}
