// Components for creating grids of cards in the current site style.
// Used in both custom .page.tsx files as well as markdoc tags {% card-grid %}
// and {% xrpl-card %}.

import * as React from 'react';
import dynamicReact from '@markdoc/markdoc/dist/react';
import { Link } from '@redocly/theme/components/Link/Link';

export interface XRPLCardProps {
    title: string,
    href: string,
    body?: string,
    image?: string,
    imageAlt?: string,
    external: boolean,
}

export function XRPLCard(props: XRPLCardProps) {
    return (
        <Link className="card float-up-on-hover" to={props.href} >
            <div className="card-body">
              { props.image && (
                <div className="card-icon-container">
                    <img src={props.image} alt={props.imageAlt} />
                </div>
              )}
              <h4 className="card-title h5">{props.title}</h4>
              { props.body && (
                <p className="card-text">{props.body}</p>
              )}
            </div>
            <div className="card-footer">&nbsp;</div>
        </Link>
    )
}

export function CardGrid(props) {
    const gridClass = `card-grid card-grid-${props.layout}`
    return (
        <div id={props.id} className={gridClass}>{dynamicReact(props.children, React, {})}</div>
    )
}