// {{ComponentName}}.tsx
// Generated by Atlas (Design System Builder)
// Atomic level: {{atomic_level}}
// Utility-first Tailwind, zero hardcoded values

import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '{{UtilityImportPath}}';
{{SpinnerImport}}

/**
 * Variant catalogue generated from consolidated tokens.
 * Extend with additional groups (state, density, alignment) as needed.
 */
export const {{componentName}}Variants = cva(
  '{{baseClasses}}',
  {
    variants: {
      variant: {
        {{VariantDefinitions}}
      },
      size: {
        {{SizeDefinitions}}
      }{{AdditionalVariantGroups}}
    },
    compoundVariants: [
      {{CompoundVariants}}
    ],
    defaultVariants: {
      variant: '{{DefaultVariant}}',
      size: '{{DefaultSize}}'{{DefaultVariantOverrides}}
    }
  }
);

export interface {{ComponentName}}Props
  extends React.{{ElementAttributes}}<{{ElementTag}}>,
    VariantProps<typeof {{componentName}}Variants> {
  /** Render as child element instead of the default tag */
  asChild?: boolean;
  /** Display loading UI and disable interactions */
  isLoading?: boolean;
  /** Optional custom loading indicator */
  loadingIcon?: React.ReactNode;
  {{AdditionalProps}}
}

/**
 * {{ComponentDescription}}
 *
 * @example
 * ```tsx
 * <{{ComponentName}} variant="{{DefaultVariant}}" size="{{DefaultSize}}">
 *   {{ExampleContent}}
 * </{{ComponentName}}>
 * ```
 */
export const {{ComponentName}} = React.forwardRef<{{ElementTag}}, {{ComponentName}}Props>(
  (
    {
      asChild = false,
      className,
      variant = '{{DefaultVariant}}',
      size = '{{DefaultSize}}',
      isLoading = false,
      loadingIcon,
      children,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : '{{HtmlElement}}';

    return (
      <Comp
        ref={ref}
        className={cn(
          {{componentName}}Variants({ variant, size }),
          isLoading && 'pointer-events-none opacity-70',
          className
        )}
        data-state={isLoading ? 'loading' : props['data-state']}
        {...props}
      >
        {isLoading &&
          (loadingIcon ?? (
            <{{SpinnerComponent}} className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
          ))}
        <span className="inline-flex items-center gap-1">{{ChildWrapper}}</span>
      </Comp>
    );
  }
);

{{ComponentName}}.displayName = '{{ComponentName}}';

export type {{ComponentName}}Variant = VariantProps<typeof {{componentName}}Variants>;