/**
 * Card 卡片组件
 * 设计稿参考: UIDesignSpec.md 3.3
 */
import React from 'react';

export interface CardProps {
  children: React.ReactNode;
  className?: string;
  variant?: 'default' | 'elevated';
  padding?: 'mobile' | 'desktop' | 'none';
  onClick?: () => void;
  hoverable?: boolean;
}

const paddingStyles = {
  mobile: 'p-[14px_16px]',
  desktop: 'p-[16px_20px]',
  none: 'p-0',
};

export const Card: React.FC<CardProps> = ({
  children,
  className = '',
  variant = 'default',
  padding = 'mobile',
  onClick,
  hoverable = false,
}) => {
  return (
    <div
      className={`
        bg-bg-card rounded-card
        ${paddingStyles[padding]}
        ${variant === 'elevated' ? 'bg-bg-elevated shadow-elevated' : ''}
        ${hoverable ? 'cursor-pointer transition-all duration-200 hover:bg-bg-elevated hover:shadow-card' : ''}
        ${onClick ? 'cursor-pointer' : ''}
        ${className}
      `}
      onClick={onClick}
    >
      {children}
    </div>
  );
};

export const CardHeader: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '' }) => (
  <div className={`flex items-center justify-between mb-3 ${className}`}>
    {children}
  </div>
);

export const CardTitle: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '' }) => (
  <h3 className={`text-section-title text-text-primary font-semibold ${className}`}>
    {children}
  </h3>
);

export const CardContent: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '' }) => (
  <div className={className}>{children}</div>
);

export const CardFooter: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '' }) => (
  <div className={`mt-4 pt-4 border-t border-border-subtle ${className}`}>
    {children}
  </div>
);

export default Card;