import { HTMLAttributes, forwardRef } from 'react';
import { cn } from '@/utils/cn';

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  title?: string;
  action?: React.ReactNode;
  extra?: React.ReactNode;
  variant?: 'default' | 'bordered' | 'elevated';
}

export const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ className, title, action, extra, variant = 'default', children, ...props }, ref) => {
    const baseStyles = 'rounded bg-white p-4';

    const variantStyles = {
      default: 'bg-white',
      bordered: 'border border-gray-200',
      elevated: 'shadow-md',
    };

    return (
      <div ref={ref} className={cn(baseStyles, variantStyles[variant], className)} {...props}>
        {(title || action || extra) && (
          <div className="mb-4 flex items-center justify-between">
            {title && <h3 className="text-lg font-semibold">{title}</h3>}
            <div className="flex items-center gap-2">
              {extra}
              {action}
            </div>
          </div>
        )}
        <div>{children || '卡片内容'}</div>
      </div>
    );
  }
);

Card.displayName = 'Card';
