/**
 * 统一的 Card 组件
 * 用于内容容器
 */
import React from "react";

export interface CardProps {
  children: React.ReactNode;
  className?: string;
  hover?: boolean;
  onClick?: () => void;
}

export const Card: React.FC<CardProps> = ({ children, className = "", hover = false, onClick }) => {
  const baseStyles = "bg-white border border-slate-200 rounded-lg overflow-hidden shadow-sm";
  const hoverStyles = hover ? "hover:border-blue-300 hover:shadow-md transition-colors cursor-pointer" : "";
  const clickStyles = onClick ? "cursor-pointer" : "";

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

export const CardHeader: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = "" }) => (
  <div className={`px-6 py-4 border-b border-slate-200 ${className}`.trim()}>
    {children}
  </div>
);

export const CardBody: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = "" }) => (
  <div className={`px-6 py-4 ${className}`.trim()}>
    {children}
  </div>
);

export const CardFooter: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = "" }) => (
  <div className={`px-6 py-4 border-t border-slate-200 bg-slate-50 ${className}`.trim()}>
    {children}
  </div>
);
