frontend/src/components/common/Card.tsx

import React from 'react';
import { motion, type HTMLMotionProps } from 'framer-motion';
import { cn } from '@/utils/helpers';

interface CardProps extends Omit<HTMLMotionProps<'div'>, 'ref'> {
  hover?: boolean;
  glow?: boolean;
  innerGlow?: boolean;
  noPadding?: boolean;
  children?: React.ReactNode;
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  (
    {
      hover = true,
      glow = false,
      innerGlow = false,
      noPadding = false,
      children,
      className,
      ...props
    },
    ref
  ) => {
    return (
      <motion.div
        ref={ref}
        whileHover={hover ? { y: -4 } : undefined}
        className={cn(
          'relative bg-slate-900 border border-slate-700 rounded-xl',
          glow && 'shadow-glow',
          noPadding ? '' : 'p-6',
          className
        )}
        {...props}
      >
        {innerGlow && (
          <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-transparent rounded-xl pointer-events-none" />
        )}
        <div className="relative z-10">{children}</div>
      </motion.div>
    );
  }
);

Card.displayName = 'Card';

export default Card;