import type { FC } from 'react';
import React from 'react';
import cx from 'classnames';
import { Label } from '../label';
import type { ComponentBaseWithChildrenProps } from '../../types';
import type { LabelProps } from '../label/label';

const CLASS_NAME = 'Metadata';

export interface MetadataProps extends ComponentBaseWithChildrenProps {
    style?: React.CSSProperties;
    layout?: 'vertical' | 'horizontal';
    label: string | LabelProps;
}

/**
 * Add a Label with a value or add other atoms.
 *
 * @tags form-elements
 * @status live
 * @type molecule
 */
export const Metadata: FC<MetadataProps> = ({
    className,
    style,
    children,
    testId = CLASS_NAME,
    layout,
    label,
}) => (
    <div data-testid={testId} className={cx(CLASS_NAME, className, layout)} style={style}>
        {typeof label === 'string' ? <Label text={label} /> : <Label {...label} />}
        <div className="content">{children}</div>
    </div>
);