1  /**
  2   * ACDC Card Component
  3   * Chain-aware card with all variants
  4   */
  5  
  6  import React from 'react'
  7  import type { Chain } from '../tokens'
  8  
  9  export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 10    variant?: 'default' | 'interactive' | 'featured' | 'selected'
 11    size?: 'sm' | 'md' | 'lg'
 12    chain?: Chain
 13    disabled?: boolean
 14    children: React.ReactNode
 15  }
 16  
 17  export const Card = React.forwardRef<HTMLDivElement, CardProps>(
 18    (
 19      {
 20        variant = 'default',
 21        size = 'md',
 22        chain,
 23        disabled = false,
 24        className = '',
 25        children,
 26        ...props
 27      },
 28      ref
 29    ) => {
 30      // Wise-inspired: clean, airy, generous padding, soft shadows
 31      const baseStyles = `
 32        bg-[var(--bg-elevated)]
 33        border border-[var(--border-subtle)]
 34        shadow-sm
 35        transition-all duration-300 ease-out
 36      `
 37  
 38      const sizeStyles = {
 39        sm: 'p-5 rounded-2xl',
 40        md: 'p-8 rounded-3xl',
 41        lg: 'p-10 rounded-3xl',
 42      }
 43  
 44      const variantStyles = {
 45        default: '',
 46        interactive: `
 47          cursor-pointer
 48          hover:shadow-lg
 49          hover:-translate-y-1
 50          hover:border-[var(--border-default)]
 51          active:translate-y-0 active:shadow-md
 52        `,
 53        featured: chain === 'delta'
 54          ? 'border-2 border-[rgba(245,158,11,0.5)] bg-gradient-to-br from-[var(--bg-elevated)] to-[rgba(245,158,11,0.05)]'
 55          : 'border-2 border-[rgba(43,135,255,0.5)] bg-gradient-to-br from-[var(--bg-elevated)] to-[rgba(43,135,255,0.05)]',
 56        selected: chain === 'delta'
 57          ? 'border-2 border-[var(--delta-primary)] shadow-lg'
 58          : 'border-2 border-[var(--alpha-primary)] shadow-lg',
 59      }
 60  
 61      const disabledStyles = disabled ? 'opacity-50 pointer-events-none' : ''
 62  
 63      return (
 64        <div
 65          ref={ref}
 66          data-chain={chain}
 67          className={`${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]} ${disabledStyles} ${className}`}
 68          {...props}
 69        >
 70          {children}
 71        </div>
 72      )
 73    }
 74  )
 75  
 76  Card.displayName = 'Card'
 77  
 78  // Card subcomponents - Wise-inspired generous spacing
 79  export const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
 80    className = '',
 81    children,
 82    ...props
 83  }) => (
 84    <div
 85      className={`px-8 py-6 border-b border-[var(--border-subtle)] flex items-center justify-between ${className}`}
 86      {...props}
 87    >
 88      {children}
 89    </div>
 90  )
 91  
 92  export const CardBody: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
 93    className = '',
 94    children,
 95    ...props
 96  }) => (
 97    <div className={`px-8 py-6 ${className}`} {...props}>
 98      {children}
 99    </div>
100  )
101  
102  export const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
103    className = '',
104    children,
105    ...props
106  }) => (
107    <div
108      className={`px-8 py-6 border-t border-[var(--border-subtle)] bg-[var(--bg-secondary)] rounded-b-3xl ${className}`}
109      {...props}
110    >
111      {children}
112    </div>
113  )