---
export interface Props {
  variant?: 'default' | 'elevated' | 'gradient' | 'outlined';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  interactive?: boolean;
  class?: string;
}

const { 
  variant = 'default',
  size = 'md',
  interactive = false,
  class: className = ''
} = Astro.props;

const baseClasses = 'bg-white border border-slate-200/50 transition-all duration-200 ease-out';

const variantClasses = {
  default: 'shadow-sm',
  elevated: 'shadow-lg',
  gradient: 'bg-gradient-to-br from-slate-50 to-white shadow-lg',
  outlined: 'border-2 border-slate-300 shadow-none'
};

const sizeClasses = {
  sm: 'rounded-xl p-4',
  md: 'rounded-2xl p-6',
  lg: 'rounded-2xl p-8',
  xl: 'rounded-3xl p-10'
};

const interactiveClasses = interactive 
  ? 'hover:shadow-xl hover:-translate-y-0.5 cursor-pointer' 
  : '';

const cardClasses = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${interactiveClasses} ${className}`;
---

<div class={cardClasses}>
  <slot />
</div>