AeThex-OS/temp-connect-extract/AeThex-Connect-main/packages/ui/components/Card.tsx

/**
 * Card Component
 * Container component for content
 */

import React, { HTMLAttributes, ReactNode } from 'react';

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'elevated' | 'outlined';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  children: ReactNode;
}

export const Card: React.FC<CardProps> = ({
  variant = 'default',
  padding = 'md',
  children,
  className = '',
  ...props
}) => {
  const variantStyles = {
    default: 'bg-gray-900 border border-gray-800',
    elevated: 'bg-gray-900 shadow-xl',
    outlined: 'bg-transparent border-2 border-gray-700',
  };
  
  const paddingStyles = {
    none: '',
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
  };
  
  return (
    <div
      className={`
        rounded-lg transition-all duration-200
        ${variantStyles[variant]}
        ${paddingStyles[padding]}
        ${className}
      `}
      {...props}
    >
      {children}
    </div>
  );
};