import React from 'react';
import { componentStyles, mergeClasses } from '../../styles/designSystem';

interface CardProps {
  variant?: 'default' | 'interactive' | 'service';
  className?: string;
  children: React.ReactNode;
  onClick?: () => void;
}

const variantClasses = {
  default: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5',
  interactive: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 cursor-pointer hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95',
  service: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 cursor-pointer hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95',
};

export const Card: React.FC<CardProps> = ({
  variant = 'default',
  className = '',
  children,
  onClick,
}) => {
  const cardClasses = mergeClasses(
    componentStyles.card.base,
    variantClasses[variant],
    className
  );

  const Component = onClick ? 'button' : 'div';

  return (
    <Component
      className={cardClasses}
      onClick={onClick}
      {...(onClick ? { type: 'button' } : {})}
    >
      {children}
    </Component>
  );
};