/**
 * EN: Color swatch component to display CSS variable colors
 * VI: Component color swatch để hiển thị màu từ CSS variable
 *
 * Shows color preview with variable name and value
 * Hiển thị preview màu với tên biến và giá trị
 */
'use client';

interface ColorSwatchProps {
    name: string;
    var: string;
}

export default function ColorSwatch({ name, var: cssVar }: ColorSwatchProps) {
    return (
        <div className="glass-card p-4">
            {/* EN: Color Preview Box / VI: Hộp preview màu */}
            <div
                className="w-full h-24 rounded-lg mb-3 border border-border-primary"
                style={{ backgroundColor: cssVar }}
            />

            {/* EN: Color Variable Name / VI: Tên biến màu */}
            <p className="text-sm font-medium text-text-primary">{name}</p>

            {/* EN: CSS Variable / VI: CSS Variable */}
            <code className="text-xs text-text-tertiary font-mono">{cssVar}</code>
        </div>
    );
}
