---
import Icon from './AstroIcon.astro';

export interface Props {
  secondaryValue?: string;
  value: string;
  text: string;
}

const { value, text, secondaryValue } = Astro.props;

const isGitHubStars = text.toLowerCase() === 'github stars';
const isRegistered = text.toLowerCase() === 'registered users';
const isDiscordMembers = text.toLowerCase() === 'discord members';
---

<div
  class='flex items-start sm:items-center justify-start flex-col sm:justify-center sm:gap-0 gap-2 sm:bg-transparent sm:rounded-none rounded-xl p-0 sm:p-4 mb-3 sm:mb-0'
>
  {
    isGitHubStars && (
      <p class='flex items-center text-sm text-blue-500 sm:flex'>
        <span class='rounded-md bg-blue-500 px-1 text-white'>Rank {secondaryValue}</span>
        &nbsp;out of 28M!
      </p>
    )
  }

  {
    isRegistered && (
      <p class='flex items-center text-sm text-blue-500 sm:flex'>
        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>{secondaryValue}</span>
        every month
      </p>
    )
  }

  {
    isDiscordMembers && (
      <p class='flex items-center text-sm text-blue-500 sm:flex'>
        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>{secondaryValue}</span>
        every month
      </p>
    )
  }
  <div class="flex flex-row items-center sm:flex-col my-1 sm:my-0">
    <p
      class='my-0 sm:my-4 mr-1 sm:mr-0 text-base font-bold sm:w-auto sm:text-5xl'
    >
      {value}
    </p>
    <p class='mb-0 mt-0 text-base sm:text-xs tracking-wide text-black sm:-mt-3 sm:mb-5'>
      {text}
    </p>
  </div>
  {
    isGitHubStars && (
      <a
        href='https://github.com/kamranahmedse/developer-roadmap'
        target='_blank'
        class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
      >
        <div class='mb-0.5 flex items-center font-semibold'>
          <Icon icon='star' class='-ml-1 fill-current' />
          <span class='ml-1.5 hover:block'>Star us on GitHub</span>
        </div>
        <span class='text-xs text-gray-500 group-hover:text-gray-100'>
          Help us reach #1
        </span>
      </a>
    )
  }
  {
    isRegistered && (
      <a
        href='/signup'
        class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
      >
        <div class='mb-0.5 flex items-center font-semibold'>
          <Icon icon='users' class='-ml-1 h-[15px] fill-current' />
          <span class='ml-1 hover:block'>Register yourself</span>
        </div>
        <span class='text-xs text-gray-500 group-hover:text-gray-100'>
          Commit to your growth
        </span>
      </a>
    )
  }
  {
    isDiscordMembers && (
      <a
        href='https://roadmap.sh/discord'
        target='_blank'
        class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
      >
        <div class='mb-0.5 flex items-center font-semibold'>
          <Icon icon='discord' class='-ml-1 h-[13px] fill-current' />
          <span class='ml-1 hover:block'>Join on Discord</span>
        </div>
        <span class='text-xs text-gray-500 group-hover:text-gray-100'>
          Join the community
        </span>
      </a>
    )
  }
</div>