import React from 'react';
import { Card as BsCard } from 'react-bootstrap';
import { CardContainer } from './components';
import { CardProvider } from './context';
import type { CardProps } from './types';

/**
 * Cards represent objects and display specific attributes of said object. They can be static or clickable. When clickable, they behave like a link to the object page.
 *
 * @type organism
 * @status live
 * @tags layout-structure, objects-attributes
 *
 * @nested Header, Body, Title, Img, Subtitle, Link, Text, ImgOverlay
 */
export const Card = ({ children, suite, layout, expandable = false, ...props }: CardProps) => {
    if (!suite) return <BsCard {...props}>{children}</BsCard>;

    return (
        <CardProvider {...props} expandable={expandable}>
            <CardContainer
                disabled={props.disabled}
                layout={layout}
                className={props.className}
                testId={props.testId}
            >
                {children}
            </CardContainer>
        </CardProvider>
    );
};