'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/components/common/FeatureCard.tsx
/**
 * @fileoverview FeatureCard component
 * @description Card wrapper with content array and routing support
 *
 * Fixed layout: Title (2 rows) → Subtitle (2 rows) → Content (1fr)
 * Title and subtitle auto-wrap with 2-line clamp and ellipsis overflow.
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { Card, IconBox, Stack, Text, renderCardContent, } from '@donotdev/components';
import { Link } from '../../routing';
/**
 * FeatureCard - Card wrapper with content array and routing
 *
 * Fixed layout: Title (2 rows) → Subtitle (2 rows) → Content (1fr)
 * Uses Card component internally.
 * Routing via Link when href provided.
 */
const FeatureCard = ({ icon, title, subtitle, content, href, variant, elevated, onClick, className, footer, style, clickable, ...cardProps }) => {
    const contentNode = renderCardContent(content);
    // Fixed height constants for consistent text sizing (2 rows each)
    const titleRowHeight = `calc(var(--font-size-lg) * var(--line-height) * 2 + var(--gap-md))`;
    const subtitleRowHeight = `calc(var(--font-size-base) * var(--line-height) * 2 + var(--gap-md))`;
    // Grid layout: title → subtitle → content → footer (no separators)
    const gridTemplateRows = `${titleRowHeight} ${subtitleRowHeight} 1fr${footer ? ' auto' : ''}`;
    // Line clamp styles for title/subtitle (2 lines max, ellipsis)
    const lineClampStyle = {
        display: '-webkit-box',
        WebkitLineClamp: 2,
        WebkitBoxOrient: 'vertical',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        wordBreak: 'break-word',
        lineHeight: 'var(--line-height)',
    };
    const titleStyle = {
        ...lineClampStyle,
        fontSize: 'var(--font-size-lg)',
        fontWeight: 600,
        color: 'inherit',
        margin: 0,
        textAlign: 'start', // Explicit text alignment for wrapped text
        flex: 1, // Allow title to grow and wrap properly in flex container
        minWidth: 0, // Allow shrinking in flex container
    };
    const subtitleStyle = {
        ...lineClampStyle,
        fontSize: 'var(--font-size-base)',
        fontWeight: 600,
        color: 'var(--muted-foreground)', // Muted for hierarchy
        margin: 0,
    };
    // Build title with icon if provided
    const titleContent = icon ? (_jsxs(Stack, { direction: "row", align: "center", style: { width: '100%' }, children: [_jsx(IconBox, { icon: icon }), _jsx(Text, { as: "div", level: "h3", style: titleStyle, children: title })] })) : (_jsx(Text, { as: "div", level: "h3", style: titleStyle, children: title }));
    const card = (_jsx(Card, { variant: variant, elevated: elevated, onClick: onClick, className: className, "data-clickable": href || onClick || clickable ? 'true' : undefined, style: {
            paddingInlineStart: 'var(--gap-md)',
            paddingInlineEnd: 'var(--gap-md)',
            gap: 'var(--gap-md)',
            height: '100%',
            textAlign: 'start',
            ...style,
        }, ...cardProps, children: _jsxs("div", { style: {
                display: 'grid',
                gridTemplateRows: gridTemplateRows,
                gap: 'var(--gap-md)',
                width: '100%',
            }, children: [_jsx("div", { style: {
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }, children: titleContent }), _jsx("div", { style: {
                        display: 'flex',
                        alignItems: 'flex-start',
                        justifyContent: 'flex-start',
                    }, children: _jsx(Text, { as: "div", level: "body", style: subtitleStyle, children: subtitle }) }), _jsx("div", { children: contentNode }), footer && _jsx("div", { children: footer })] }) }));
    // Wrap Card with Link for routing
    if (href && !onClick) {
        return (_jsx(Link, { path: href, style: { display: 'block', textDecoration: 'none', height: '100%' }, "aria-label": title ? `Learn more about ${title}` : undefined, children: card }));
    }
    return card;
};
export default FeatureCard;
