import type { ReactNode } from 'react';
import AnimatedAmount from './AnimatedAmount';

interface SummaryCardProps {
    /** Card label shown above the number */
    label: string;
    /** Numeric value to animate (in rupees) */
    value: number;
    /** Icon displayed in the badge — pass any Ant Design icon element */
    icon: ReactNode;
    /**
     * Base accent colour (used for the icon badge background, border,
     * label text, and the number).  Use a mid-tone colour; the card
     * background will be derived automatically as a very light tint.
     * Example: "#1677ff"
     */
    color: string;
    /**
     * Optional light background override.
     * Defaults to a CSS colour-mix-based tint derived from `color`.
     * You can pass an explicit hex / rgba string here instead.
     */
    background?: string;
    showCurrency?: boolean;
}

/**
 * Reusable stat card with an animated counter, icon badge, and light
 * pastel styling.  Pass `color` to theme the entire card.
 */
const SummaryCard = ({ label, value, icon, color, background, showCurrency = true }: SummaryCardProps) => {
    // Derive a very light tint for the card background when not overridden
    const bg = background ?? `color-mix(in srgb, ${color} 10%, #ffffff)`;

    return (
        <div
            style={{
                background: bg,
                border: `1.5px solid color-mix(in srgb, ${color} 25%, #ffffff)`,
                borderRadius: 14,
                padding: '16px 20px',
                display: 'flex',
                alignItems: 'center',
                gap: 14,
                boxShadow: `0 2px 12px color-mix(in srgb, ${color} 15%, transparent)`,
                position: 'relative',
                overflow: 'hidden',
            }}
        >
            {/* Decorative soft circle */}
            <div
                style={{
                    position: 'absolute',
                    right: -20,
                    bottom: -20,
                    width: 80,
                    height: 80,
                    borderRadius: '50%',
                    background: `color-mix(in srgb, ${color} 12%, transparent)`,
                    pointerEvents: 'none',
                }}
            />

            {/* Icon badge */}
            <div
                style={{
                    width: 44,
                    height: 44,
                    borderRadius: 12,
                    background: `color-mix(in srgb, ${color} 18%, #ffffff)`,
                    border: `1px solid color-mix(in srgb, ${color} 30%, #ffffff)`,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexShrink: 0,
                    fontSize: 20,
                    color,
                }}
            >
                {icon}
            </div>

            {/* Text */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span
                    style={{
                        fontSize: 11,
                        fontWeight: 700,
                        letterSpacing: 1.1,
                        textTransform: 'uppercase',
                        color: `color-mix(in srgb, ${color} 70%, #555555)`,
                    }}
                >
                    {label}
                </span>
                <AnimatedAmount value={value} color={color} showCurrency={showCurrency} />
            </div>
        </div>
    );
};

export default SummaryCard;