/**
 * Card Component
 * 
 * Container component with elevation and border
 */

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

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  hover?: boolean;
  children: ReactNode;
}

export function Card({ hover = false, className = '', children, ...props }: CardProps) {
  const baseStyles = 'rounded-2xl border border-border bg-surface shadow-card';
  const hoverStyles = hover
    ? 'transition-all duration-300 hover:shadow-elevated hover:-translate-y-0.5'
    : '';

  return (
    <div className={`${baseStyles} ${hoverStyles} ${className}`} {...props}>
      {children}
    </div>
  );
}