import { CSSObject } from 'styled-components';
import { CardVariant } from './types';
import { BreakpointType } from '../../breakpoints/breakPoints';
export type CardState = 'default' | 'hover';
/**
 * Card Tokens following proper hierarchy pattern
 *
 * Structure:
 * container (outermost) -> header/body (sections) -> text/content/actions (elements) -> properties
 *
 * Pattern:
 * - container.property.[variant].[state] (for variant-dependent properties)
 * - container.header.text.title.property (for shared text styling)
 * - container.body.actions.inline.gap.[variant] (for variant-dependent spacing)
 *
 * Hierarchy:
 * - Container: Outermost wrapper with base styling and variant-dependent properties
 * - Header: Header section with text styling and variant-specific box styling
 * - Body: Body section with text, content, actions, and variant-specific spacing
 */
export type CardTokenType = {
    maxWidth: CSSObject['maxWidth'];
    borderRadius: CSSObject['borderRadius'];
    border: CSSObject['border'];
    boxShadow: CSSObject['boxShadow'];
    backgroundColor: CSSObject['backgroundColor'];
    padding: {
        [CardVariant.DEFAULT]: {
            x: CSSObject['padding'];
            y: CSSObject['padding'];
        };
        [CardVariant.ALIGNED]: {
            x: CSSObject['padding'];
            y: CSSObject['padding'];
        };
        [CardVariant.CUSTOM]: undefined;
    };
    header: {
        [CardVariant.DEFAULT]: {
            backgroundColor: CSSObject['backgroundColor'];
            padding: {
                x: CSSObject['padding'];
                y: CSSObject['padding'];
            };
            borderBottom: CSSObject['borderBottom'];
        };
        [CardVariant.ALIGNED]: undefined;
        [CardVariant.CUSTOM]: undefined;
        text: {
            title: {
                fontSize: CSSObject['fontSize'];
                fontWeight: CSSObject['fontWeight'];
                color: CSSObject['color'];
                gap: CSSObject['gap'];
            };
            subTitle: {
                fontSize: CSSObject['fontSize'];
                fontWeight: CSSObject['fontWeight'];
                color: CSSObject['color'];
            };
            gap: CSSObject['gap'];
        };
    };
    body: {
        padding: {
            [CardVariant.DEFAULT]: {
                x: CSSObject['padding'];
                y: CSSObject['padding'];
            };
            [CardVariant.ALIGNED]: undefined;
            [CardVariant.CUSTOM]: undefined;
        };
        gap: {
            [key in CardVariant]: CSSObject['gap'];
        };
        text: {
            title: {
                fontSize: CSSObject['fontSize'];
                fontWeight: CSSObject['fontWeight'];
                color: CSSObject['color'];
            };
            content: {
                fontSize: CSSObject['fontSize'];
                color: CSSObject['color'];
                fontWeight: CSSObject['fontWeight'];
            };
            gap: CSSObject['gap'];
        };
        actions: {
            gap: CSSObject['gap'];
            centerAlignGap: CSSObject['gap'];
        };
        alignment: {
            [CardVariant.ALIGNED]: {
                cardSlot: {
                    vertical: {
                        marginBottom: CSSObject['marginBottom'];
                        minHeight: CSSObject['minHeight'];
                    };
                    horizontal: {
                        marginRight: CSSObject['marginRight'];
                        width: CSSObject['width'];
                        height: CSSObject['height'];
                    };
                };
            };
            [CardVariant.DEFAULT]: undefined;
            [CardVariant.CUSTOM]: undefined;
        };
    };
};
export type ResponsiveCardTokens = {
    [key in keyof BreakpointType]: CardTokenType;
};