import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
export const Card = ({ title, subtitle, children, className = "", headerActions, footer, variant = "default", }) => {
    const baseClasses = `
    bg-[var(--color-bg-default)] rounded-lg border
    font-[var(--font-default)]
  `;
    const variantClasses = {
        default: `border-[var(--color-border-default)]`,
        elevated: `border-[var(--color-border-default)] shadow-[var(--shadow-lg)]`,
        outlined: `border-[var(--color-gray-300)]`,
    };
    const classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
    return (_jsxs("div", { className: classes, children: [(title || subtitle || headerActions) && (_jsx("div", { className: "px-6 py-4 border-b border-[var(--color-border-default)]", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [title && (_jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title })), subtitle && (_jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }), headerActions && (_jsx("div", { className: "flex items-center space-x-2", children: headerActions }))] }) })), _jsx("div", { className: "px-6 py-4", children: children }), footer && (_jsx("div", { className: "px-6 py-4 border-t border-[var(--color-border-default)] bg-[var(--color-bg-secondary)] rounded-b-lg", children: footer }))] }));
};
