{% set has_url = url is not empty ? 'yes' : 'no' %}

{% set tile =
  html_cva(
    base: ['max-w-full md:min-h-[150px]'],
    variants: {
      hasUrl: {
        yes: 'group cursor-pointer transition duration-300 hover:scale-103 hover:opacity-90',
        no: ''
      },
      backgroundColor: {
        primary: 'bg-primary text-primary-foreground',
        secondary: 'bg-secondary text-secondary-foreground',
        accent: 'bg-accent text-accent-foreground',
        muted: 'bg-muted text-muted-foreground',
        inverted: 'bg-foreground text-background',
        noColor: 'bg-none text-foreground'
      },
      borderRadius: {
        small: 'rounded-sm',
        medium: 'rounded-xl md:rounded-2xl',
        large: 'rounded-[24px] md:rounded-[32px]',
        noRadius: 'rounded-none'
      }
    }
  )
%}

{% set tile_classes =
  tile.apply({
    hasUrl: has_url,
    backgroundColor: background_color|default('noColor'),
    borderRadius: border_radius|default('noRadius')
  })
%}

<div class="{{ tile_classes }}">
  <div class="flex h-[100%] items-center justify-center p-[10%]">
    {% block logo %}
      {% if url is not empty %}
        <a href="{{ url }}">
          {% if media.src is not empty %}
            {% include 'canvas:image' ignore missing with {
              src: media.src,
              alt: media.alt,
              width: media.width,
              height: media.height
            } only %}
          {% endif %}
        </a>
      {% else %}
        {% if media.src is not empty %}
          {% include 'canvas:image' ignore missing with {
            src: media.src,
            alt: media.alt,
            width: media.width,
            height: media.height
          } only %}
        {% endif %}
      {% endif %}
    {% endblock %}
  </div>
</div>
