<c-vars
    class=""
    variant=""
    :variantsClasses="{
        'primary': 'bg-primary text-primary-content',
        'secondary': 'bg-secondary text-secondary-content',
        'accent': 'bg-accent text-accent-content',
        'neutral': 'bg-neutral text-neutral-content',
        'info': 'bg-info text-info-content',
        'success': 'bg-success text-success-content',
        'warning': 'bg-warning text-warning-content',
        'error': 'bg-error text-error-content'
    }"
    border
    dash
    side
    imageFull
    size="md"
    :sizeClasses="{
        'lg': 'card-lg',
        'md': 'card-md',
        'sm': 'card-sm',
        'xs': 'card-xs'
    }"
/>

<div
    class="card {{ variantsClasses|get_item:variant }} {% if border %}card-border{% endif %} {% if dash %}card-dash{% endif %} {% if side %}card-side{% endif %} {% if imageFull %}image-full{% endif %} {{ sizeClasses|get_item:size }} {{ class }}"
    {{ attrs }}
>
    {{ slot }}
</div>
