apps/web_comercial/src/components/ui/Card.tsx

import React from "react";

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  title?: string;
  headerAction?: React.ReactNode;
  noPadding?: boolean;
  highlight?: boolean;
}

export function Card({
  children,
  title,
  headerAction,
  noPadding = false,
  highlight = false,
  className = "",
  ...props
}: CardProps) {
  return (
    <div className={`ui-card ${highlight ? "highlight" : ""} ${className}`} {...props}>
      {(title || headerAction) && (
        <div className="ui-card-header">
          {title && <h3 className="ui-card-title">{title}</h3>}
          {headerAction && <div className="ui-card-action">{headerAction}</div>}
        </div>
      )}
      <div className={`ui-card-content ${noPadding ? "no-padding" : ""}`}>
        {children}
      </div>
    </div>
  );
}

export function DataCard({
  label,
  value,
  subvalue,
  highlight = false,
}: {
  label: string;
  value: string | React.ReactNode;
  subvalue?: string;
  highlight?: boolean;
}) {
  return (
    <div className={`ui-data-card ${highlight ? "highlight" : ""}`}>
      <span className="ui-data-label">{label}</span>
      <span className="ui-data-value">{value}</span>
      {subvalue && <span className="ui-data-subvalue">{subvalue}</span>}
    </div>
  );
}