"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TailwindCard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const cn_js_1 = require("../utils/cn.js");
/**
 * TailwindCard component for displaying content in a card layout
 *
 * A versatile card component with support for headers, footers, images,
 * and various visual styles. Built with Tailwind CSS for optimal flexibility.
 *
 * @example
 * // Basic usage
 * <TailwindCard title="Card Title">
 *   This is the card content
 * </TailwindCard>
 *
 * @example
 * // With image and footer
 * <TailwindCard
 *   title="Featured Article"
 *   image="/article-image.jpg"
 *   footer={<Button>Read more</Button>}
 * >
 *   Article preview text goes here...
 * </TailwindCard>
 */
exports.TailwindCard = (0, react_1.forwardRef)(({ title, content, footer, image, imageAlt, variant = 'default', size = 'medium', clickable = false, url, hoverable = false, className, children, ...props }, ref) => {
    // Component content
    const cardContent = children || content;
    // Base classes for the card
    const baseClasses = "rounded-lg overflow-hidden";
    // Variant-specific classes
    const variantClasses = {
        'default': "bg-card text-card-foreground",
        'elevated': "bg-card text-card-foreground shadow-lg",
        'outlined': "bg-background text-foreground border border-border",
    };
    // Size-specific classes
    const sizeClasses = {
        'small': "p-3",
        'medium': "p-5",
        'large': "p-7",
    };
    // Interaction classes
    const interactionClasses = (0, cn_js_1.cn)(clickable ? "cursor-pointer" : "", hoverable ? "transition-all duration-200 hover:shadow-md" : "", clickable && hoverable ? "hover:translate-y-[-2px]" : "");
    // Combine all classes
    const cardClasses = (0, cn_js_1.cn)(baseClasses, variantClasses[variant], sizeClasses[size], interactionClasses, className);
    // Create the card content
    const CardContent = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [image && ((0, jsx_runtime_1.jsx)("div", { className: "w-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("img", { src: image, alt: imageAlt || title?.toString() || '', className: "w-full h-auto object-cover" }) })), title && ((0, jsx_runtime_1.jsx)("div", { className: "mb-3 border-b border-border pb-2", children: (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold", children: title }) })), cardContent && ((0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: cardContent })), footer && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 pt-3 border-t border-border", children: footer }))] }));
    // Render as link if URL is provided
    if (url) {
        return ((0, jsx_runtime_1.jsx)("a", { ref: ref, href: url, className: cardClasses, ...props, children: (0, jsx_runtime_1.jsx)(CardContent, {}) }));
    }
    // Otherwise render as div
    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cardClasses, ...props, children: (0, jsx_runtime_1.jsx)(CardContent, {}) }));
});
exports.TailwindCard.displayName = 'TailwindCard';
exports.default = exports.TailwindCard;
//# sourceMappingURL=TailwindCard.js.map