stack/packages/ui/src/components/Card.tsx

import type { ReactNode, ReactElement } from "react";

export interface CardProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
  id?: string;
  onMouseEnter?: () => void;
  onMouseLeave?: () => void;
}

export interface CardHeaderProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export interface CardContentProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export interface CardFooterProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export function Card({
  children,
  className = "",
  style,
  id,
  onMouseEnter,
  onMouseLeave,
}: CardProps): ReactElement {
  return (
    <div
      id={id}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      className={className}
      style={{
        background: "var(--surface)",
        border: "1px solid var(--border)",
        borderRadius: "var(--r-lg)",
        padding: "16px",
        ...style,
      }}
    >
      {children}
    </div>
  );
}

export function CardHeader({ children, className = "", style }: CardHeaderProps): ReactElement {
  return (
    <div
      className={`px-6 py-4 ${className}`}
      style={{
        borderBottom: "1px solid var(--border)",
        ...style,
      }}
    >
      {children}
    </div>
  );
}

export function CardContent({ children, className = "", style }: CardContentProps): ReactElement {
  return (
    <div className={`px-6 py-4 ${className}`} style={style}>
      {children}
    </div>
  );
}

export function CardFooter({ children, className = "", style }: CardFooterProps): ReactElement {
  return (
    <div
      className={`px-6 py-4 rounded-b-lg ${className}`}
      style={{
        borderTop: "1px solid var(--border)",
        background: "var(--bg-mid)",
        ...style,
      }}
    >
      {children}
    </div>
  );
}