{%- liquid
  assign current_country = localization.country
  assign current_currency = localization.country.currency
-%}

<div class="header-currency-display">
  <div class="currency-wrapper" title="Prices are shown in {{ current_currency.name }}">
    <span class="country-flag">
      {%- comment -%} Menggunakan CDN flag resmi atau emoji {%- endcomment -%}
      <img 
        src="https://flagcdn.com/w40/{{ current_country.iso_code | downcase }}.png" 
        width="5px" 
        height="5px" 
        alt="{{ current_country.name }}"
        loading="lazy"
      >
    </span>
    <!--<span class="currency-info">
      <span class="currency-code">{{ current_currency.iso_code }}</span>
      <span class="currency-symbol">({{ current_currency.symbol }})</span>
    </span>-->
    {%- if current_country.iso_code != 'ID' -%}
      <span class="intl-badge">International Mode</span>
    {%- endif -%}
  </div>
</div>

{% comment %} PAKAI INI BUAT PANGGIL FUNCTION NYA, SIMPAN DI HEADER "{% render 'header-currency-indicator' %}"  {%  endcomment %}

<style>
  .header-currency-display {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(0,0,0,0.03);
    border-radius: 50px;
    border: 1px solid rgba(0,0,0,0.08);
    font-family: inherit;
  }
  .currency-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #333;
  }
  .country-flag img {
    display: block;
    border-radius: 2px;
    object-fit: cover;
  }
  .currency-code {
    font-weight: 700;
  }
  .currency-symbol {
    opacity: 0.6;
    margin-left: 2px;
  }
  .intl-badge {
    font-size: 10px;
    background: #000;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Responsif */
  @media screen and (max-width: 480px) {
    .currency-symbol, .intl-badge { display: none; }
    .header-currency-display { padding: 4px 8px; }
  }
</style>