---
import type { ResourceType } from '../lib/resource-progress';
import AstroIcon from './AstroIcon.astro';
import { ProgressShareButton } from './UserProgress/ProgressShareButton';
export interface Props {
  resourceId: string;
  resourceType: ResourceType;
}

const { resourceId, resourceType } = Astro.props;
---

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

    <span>
      <span data-progress-done>0</span> of <span data-progress-total>0</span> Done
    </span>
  </p>

  <div
    class='flex items-center gap-3 opacity-0 transition-opacity duration-300'
    data-progress-nums
  >
    <ProgressShareButton
      resourceId={resourceId}
      resourceType={resourceType}
      client:only='react'
    />
    <button
      data-popup='progress-help'
      class='hidden items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black sm:flex'
      data-progress-nums
    >
      <AstroIcon icon='question' />
      Track Progress
    </button>
  </div>
</div>