
import { ComponentDefinition } from '@mintel/content-engine';

export const componentDefinitions: ComponentDefinition[] = [
    {
        name: 'LeadParagraph',
        description: 'Large, introductory text for the beginning of the article.',
        usageExample: '<LeadParagraph>First meaningful sentence.</LeadParagraph>'
    },
    {
        name: 'H2',
        description: 'Section heading.',
        usageExample: '<H2>Section Title</H2>'
    },
    {
        name: 'H3',
        description: 'Subsection heading.',
        usageExample: '<H3>Subtitle</H3>'
    },
    {
        name: 'Paragraph',
        description: 'Standard body text paragraph.',
        usageExample: '<Paragraph>Some text...</Paragraph>'
    },
    {
        name: 'ArticleBlockquote',
        description: 'A prominent quote block for key insights.',
        usageExample: '<ArticleBlockquote>Important quote</ArticleBlockquote>'
    },
    {
        name: 'Marker',
        description: 'Yellow highlighter effect for very important phrases.',
        usageExample: '<Marker>Highlighted Text</Marker>'
    },
    {
        name: 'ComparisonRow',
        description: 'A component comparing a negative vs positive scenario.',
        usageExample: '<ComparisonRow description="Cost Comparison" negativeLabel="Lock-In" negativeText="High costs" positiveLabel="Open" positiveText="Control" />'
    },
    {
        name: 'StatsDisplay',
        description: 'A bold visual component to highlight a key statistic or number.',
        usageExample: '<StatsDisplay value="42%" label="Cost Reduction" subtext="Average savings by switching to open standards." />'
    },
    {
        name: 'Mermaid',
        description: 'Renders a Mermaid diagram.',
        usageExample: '<Mermaid graph="graph TD..." id="my-diagram" />'
    },
    {
        name: 'DiagramState',
        description: 'A state transition diagram.',
        usageExample: '<DiagramState states={["A", "B"]} ... />'
    }
];
