veza/apps/web/src/components/base/Card.tsx

import React from 'react';
import type { BaseComponentProps } from '../types';


/**
 * Props for Card component
 * Enhanced with Fusion Design System variants
 */
export interface CardProps extends BaseComponentProps {
  children: React.ReactNode;
  variant?: 'default' | 'manga' | 'neon' | 'nature' | 'elevated' | 'glass';
  interactive?: boolean;
  spacing?: 'compact' | 'normal' | 'spacious';
  borderless?: boolean;
  flat?: boolean;
}

export interface CardHeaderProps extends BaseComponentProps {
  children: React.ReactNode;
}

export interface CardBodyProps extends BaseComponentProps {
  children: React.ReactNode;
}

export interface CardFooterProps extends BaseComponentProps {
  children: React.ReactNode;
}

export const Card = ({
  children,
  variant = 'default',
  interactive = false,
  spacing = 'normal',
  borderless = false,
  flat = false,
  className = '',
  ...props
}: CardProps) => {
  const baseClass = 'card-veza';
  const variantClass = `card-veza--${variant}`;
  const interactiveClass = interactive ? 'card-veza--interactive' : '';
  const spacingClass = spacing !== 'normal' ? `card-veza--${spacing}` : '';
  const borderlessClass = borderless ? 'card-veza--borderless' : '';
  const flatClass = flat ? 'card-veza--flat' : '';

  const classes = [
    baseClass,
    variantClass,
    interactiveClass,
    spacingClass,
    borderlessClass,
    flatClass,
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <div className={classes} {...props}>
      {children}
    </div>
  );
};

export const CardHeader = ({
  children,
  className = '',
  ...props
}: CardHeaderProps) => {
  return (
    <div className={`card-veza__header ${className}`} {...props}>
      {children}
    </div>
  );
};

export const CardTitle = ({
  children,
  className = '',
  ...props
}: CardHeaderProps) => {
  return (
    <h3 className={`card-veza__title ${className}`} {...props}>
      {children}
    </h3>
  );
};

export const CardBody = ({
  children,
  className = '',
  ...props
}: CardBodyProps) => {
  return (
    <div className={`card-veza__body ${className}`} {...props}>
      {children}
    </div>
  );
};

export const CardFooter = ({
  children,
  className = '',
  ...props
}: CardFooterProps) => {
  return (
    <div className={`card-veza__footer ${className}`} {...props}>
      {children}
    </div>
  );
};