'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import Link from 'next/link';
import { cn } from '@/lib/utils';
import { ArrowRight, ArrowSquareOut } from '@phosphor-icons/react';
import * as PhosphorIcons from '@phosphor-icons/react';
import { useDocsNavigation } from '@/lib/docs-navigation-context';
// Dynamic icon resolver for Phosphor icons
function getIcon(iconName) {
    if (!iconName) return null;
    // Convert kebab-case or snake_case to PascalCase
    const pascalCase = iconName.split(/[-_]/).map((word)=>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
    // Try to get the icon from Phosphor
    const Icon = PhosphorIcons[pascalCase];
    return Icon || null;
}
// Icon size configurations
const ICON_SIZES = {
    sm: {
        container: 'h-8 w-8',
        icon: 'h-4 w-4',
        img: 'h-5 w-5'
    },
    md: {
        container: 'h-10 w-10',
        icon: 'h-5 w-5',
        img: 'h-6 w-6'
    },
    lg: {
        container: 'h-12 w-12',
        icon: 'h-6 w-6',
        img: 'h-8 w-8'
    },
    xl: {
        container: 'h-16 w-16',
        icon: 'h-8 w-8',
        img: 'h-12 w-12'
    }
};
export function Card({ title, children, icon, iconSize = 'md', href, horizontal = false, img, cta, arrow, className }) {
    // Check if icon is a string (icon name) or React node
    const isIconString = typeof icon === 'string';
    const Icon = isIconString ? getIcon(icon) : null;
    const hasCustomIcon = !isIconString && icon != null;
    const sizeConfig = ICON_SIZES[iconSize];
    const isExternal = href?.startsWith('http') || href?.startsWith('//');
    const docsNav = useDocsNavigation();
    // Check if this is a tab switch link (/api-reference, /changelog)
    const isTabSwitchLink = (href === '/api-reference' || href === '/changelog') && docsNav?.isApiDocsView;
    // Check if this is an internal docs link (starts with / but not external or tab switch)
    const isInternalDocsLink = href?.startsWith('/') && !isExternal && !isTabSwitchLink && docsNav?.isApiDocsView;
    // Extract slug from href - removes /docs/ prefix if present, or just the leading /
    const getSlugFromHref = (path)=>{
        let slug = path;
        if (slug.startsWith('/docs/')) {
            slug = slug.slice(6); // Remove '/docs/'
        } else if (slug.startsWith('/')) {
            slug = slug.slice(1); // Remove leading '/'
        }
        return slug;
    };
    // Get tab ID from href
    const getTabIdFromHref = (path)=>{
        if (path === '/api-reference') return 'api-reference';
        if (path === '/changelog') return 'changelog';
        return 'docs';
    };
    // Handle click for internal navigation
    const handleClick = (e)=>{
        if (!href || !docsNav) return;
        if (isTabSwitchLink) {
            e.preventDefault();
            const tabId = getTabIdFromHref(href);
            docsNav.switchToTab(tabId);
        } else if (isInternalDocsLink) {
            e.preventDefault();
            const slug = getSlugFromHref(href);
            docsNav.navigateToPage(slug);
        }
    };
    const showArrow = arrow ?? isExternal;
    const cardContent = /*#__PURE__*/ _jsxs("div", {
        className: cn('docs-card group relative rounded-lg border border-border bg-transparent p-4 transition-all h-full', href && 'hover:border-primary/50 hover:bg-muted/30 cursor-pointer', horizontal ? 'docs-card-horizontal flex items-start gap-4' : 'flex flex-col justify-start', className),
        children: [
            img && !horizontal && /*#__PURE__*/ _jsx("div", {
                className: "mb-4 -mx-4 -mt-4 overflow-hidden rounded-t-lg",
                children: /*#__PURE__*/ _jsx("img", {
                    src: img,
                    alt: title,
                    className: "w-full h-auto object-cover"
                })
            }),
            Icon && /*#__PURE__*/ _jsx("div", {
                className: cn('docs-card-icon flex shrink-0 items-center justify-center rounded-lg', sizeConfig.container, 'bg-primary/10 text-primary', horizontal && 'mt-0.5'),
                children: /*#__PURE__*/ _jsx(Icon, {
                    className: sizeConfig.icon,
                    weight: "duotone"
                })
            }),
            hasCustomIcon && /*#__PURE__*/ _jsx("div", {
                className: cn('docs-card-icon flex shrink-0 items-center justify-center rounded-lg overflow-hidden', sizeConfig.container, horizontal && 'mt-0.5'),
                children: icon
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: cn('docs-card-content min-w-0', horizontal && 'flex-1', !horizontal && (Icon || hasCustomIcon) && 'mt-3'),
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "flex items-center gap-2",
                        children: [
                            /*#__PURE__*/ _jsx("h3", {
                                className: "docs-card-title font-semibold text-foreground group-hover:text-primary transition-colors",
                                children: title
                            }),
                            showArrow && (isExternal ? /*#__PURE__*/ _jsx(ArrowSquareOut, {
                                className: "h-4 w-4 text-muted-foreground"
                            }) : /*#__PURE__*/ _jsx(ArrowRight, {
                                className: "h-4 w-4 text-muted-foreground opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all"
                            }))
                        ]
                    }),
                    children && /*#__PURE__*/ _jsx("div", {
                        className: "docs-card-description mt-1 text-sm text-muted-foreground",
                        children: children
                    }),
                    cta && /*#__PURE__*/ _jsx("div", {
                        className: "docs-card-cta mt-3 text-sm font-medium text-primary",
                        children: cta
                    })
                ]
            })
        ]
    });
    if (href) {
        if (isExternal) {
            return /*#__PURE__*/ _jsx("a", {
                href: href,
                target: "_blank",
                rel: "noopener noreferrer",
                className: "docs-card-link block h-full",
                children: cardContent
            });
        }
        // For internal docs links or tab switch links in ApiDocs view, use click handler
        if (isInternalDocsLink || isTabSwitchLink) {
            return /*#__PURE__*/ _jsx("a", {
                href: href,
                onClick: handleClick,
                className: "docs-card-link block h-full cursor-pointer",
                children: cardContent
            });
        }
        // Standard Next.js Link for all other internal links
        return /*#__PURE__*/ _jsx(Link, {
            href: href,
            className: "docs-card-link block h-full",
            children: cardContent
        });
    }
    return cardContent;
}
export function CardGroup({ children, cols = 2, className }) {
    const gridCols = {
        1: 'grid-cols-1',
        2: 'grid-cols-1 sm:grid-cols-2',
        3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
        4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
    };
    return /*#__PURE__*/ _jsx("div", {
        className: cn('docs-card-group grid gap-4 my-4', gridCols[cols], className),
        children: children
    });
}
// Alias for Mintlify compatibility
export { CardGroup as Columns };
