---
import AstroIcon from './AstroIcon.astro';
export interface Props {
  isSecondaryBanner?: boolean;
}

const { isSecondaryBanner = false } = Astro.props;
---

<div
  data-progress-nums-container
  class:list={[
    'hidden sm:flex justify-between px-2 bg-white items-center py-1.5 relative striped-loader bg-white',
    {
      'rounded-bl-md rounded-br-md': isSecondaryBanner,
      'rounded-md': !isSecondaryBanner,
    },
  ]}
>
  <p
    class='flex text-sm opacity-0 transition-opacity duration-300'
    data-progress-nums
  >
    <span
      class='mr-2.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900'
    >
      <span data-progress-percentage>0</span>% Done
    </span>

    <span><span data-progress-done>0</span> completed</span><span
      class='mx-1.5 text-gray-400'>&middot;</span
    >
    <span><span data-progress-learning>0</span> in progress</span><span
      class='mx-1.5 text-gray-400'>&middot;</span
    >
    <span><span data-progress-skipped>0</span> skipped</span><span
      class='mx-1.5 text-gray-400'>&middot;</span
    >
    <span><span data-progress-total>0</span> Total</span>
  </p>

  <button
    data-popup='progress-help'
    class='flex items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black'
    data-progress-nums
  >
    <AstroIcon icon='question' />
    Track Progress
  </button>
</div>

<p
  data-progress-nums-container
  class='striped-loader relative -mb-2 flex items-center justify-between rounded-md border bg-white bg-white px-2 py-1.5 text-sm text-sm text-gray-700 sm:hidden'
>
  <span data-progress-nums class='opacity-0 transition-opacity duration-300 text-gray-500'>
    <span data-progress-done>0</span> of <span data-progress-total>0</span> Done
  </span>

  <button
    data-popup='progress-help'
    class='flex items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black'
    data-progress-nums
  >
    <AstroIcon icon='question' />
    Track Progress
  </button>
</p>