import React from "react";
/**
 * Data segment for the multi-segment donut chart
 */
export interface DonutSegment {
    /**
     * The actual value this segment represents
     */
    value: number;
    /**
     * The percentage this segment represents (0-100)
     * This should be calculated based on the total of all values
     */
    percentage: number;
    /**
     * Optional label for this segment
     */
    label?: string;
    /**
     * Optional custom color for this segment
     * If not provided, will use colors from the theme palette
     */
    color?: string;
}
/**
 * Theme overrides for the MultiSegmentDonutChart component
 */
export interface MultiSegmentDonutChartThemeOverrides {
    /** Base style for the container */
    baseStyle?: string;
    /** Track (background circle) styling */
    track?: string;
    /** Legend container styling */
    legend?: {
        /** Container styles */
        container?: string;
        /** Individual legend item styles */
        item?: string;
        /** Legend label text styles */
        label?: string;
        /** Legend value text styles */
        value?: string;
        /** Color indicator dot styles */
        colorDot?: string;
    };
    /** Center content area styling */
    centerContent?: string;
    /** Default color palette for segments */
    colors?: string[];
}
/**
 * MultiSegmentDonutChart component props
 */
export interface MultiSegmentDonutChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
    /**
     * Array of data segments to display
     * Each segment should have value and percentage
     */
    data: DonutSegment[];
    /**
     * Size of the donut chart
     * Can be a number (pixels) or CSS size string
     * @default 200
     */
    size?: number | string;
    /**
     * Thickness of the donut stroke
     * @default 2
     */
    thickness?: number;
    /**
     * Gap between segments as a fraction (0-0.8)
     * 0 means no gap, 0.8 means large gaps
     * @default 0.02
     */
    segmentGap?: number;
    /**
     * Whether to show entrance animation
     * @default true
     */
    showAnimation?: boolean;
    /**
     * Whether to show a legend with labels and values
     * @default false
     */
    showLegend?: boolean;
    /**
     * Position of the legend
     * @default "right"
     */
    legendPosition?: "top" | "right" | "bottom" | "left";
    /**
     * Custom content to display in the center of the donut
     */
    centerContent?: React.ReactNode;
    /**
     * Component-level theme overrides
     */
    theme?: MultiSegmentDonutChartThemeOverrides;
    /**
     * Additional CSS classes
     */
    className?: string;
    /**
     * Callback when a segment is hovered
     */
    onSegmentHover?: (segment: DonutSegment | null) => void;
    /**
     * Callback when a segment is clicked
     */
    onSegmentClick?: (segment: DonutSegment) => void;
    /**
     * Whether to render segments with rounded end caps
     * Uses stroke-based rendering with stroke-linecap="round"
     * @default true
     */
    roundedCaps?: boolean;
}
/**
 * Default theme configuration
 */
export interface MultiSegmentDonutChartTheme extends Required<MultiSegmentDonutChartThemeOverrides> {
}
