import useStakeRates from 'hooks/useStakeRates'
import Image from 'next/image'
import { formatTokenSymbol } from 'utils/tokens'
import SheenLoader from './shared/SheenLoader'

const TokenButton = (
  {
    handleTokenSelect,
    selectedToken,
    tokenName,
  }: {
    tokenName: string
    selectedToken: string
    handleTokenSelect: (v: string) => void
  },
) => {
  const { data: stakeRates, isLoading } = useStakeRates()

  return (
    <button
      className={`col-span-1 flex items-center justify-center border-r border-th-fgd-1 p-4 first:rounded-tl-[13px] last:rounded-tr-[13px] last:border-r-0 hover:cursor-pointer ${
        selectedToken === tokenName
          ? 'inner-shadow-top bg-th-primary-2'
          : 'inner-shadow-bottom default-transition bg-th-bkg-1 md:hover:bg-th-bkg-2'
      }`}
      onClick={() => handleTokenSelect(tokenName)}
    >
      <div className="flex flex-col items-center">
        <div
          className={`flex h-12 w-12 items-center justify-center rounded-full border ${
            selectedToken === tokenName
              ? 'inner-shadow-top-sm border-th-primary-1 bg-gradient-to-b from-th-primary-2 to-th-primary-3'
              : 'inner-shadow-bottom-sm border-th-bkg-2 bg-gradient-to-b from-th-bkg-1 to-th-bkg-2'
          }`}
        >
          <Image
            src={`/icons/${tokenName.toLowerCase()}.svg`}
            width={24}
            height={24}
            alt="Select a token"
          />
        </div>
        <span
          className={`mt-1 font-display text-xl ${
            selectedToken === tokenName
              ? 'text-shadow text-th-active'
              : 'text-th-fgd-1'
          }`}
        >
          {formatTokenSymbol(tokenName)}
        </span>
        <span
          className={`-mt-1 font-mono ${
            selectedToken === tokenName ? 'text-th-bkg-1' : 'text-th-fgd-4'
          }`}
        >
          {isLoading ? (
            <SheenLoader>
              <div
                className={`h-5 w-10 ${
                  selectedToken === tokenName
                    ? 'bg-th-primary-1'
                    : 'bg-th-bkg-2'
                }`}
              />
            </SheenLoader>
          ) : stakeRates?.[tokenName.toLowerCase()] ? (
            `${(stakeRates?.[tokenName.toLowerCase()] * 100).toFixed(2)}%`
          ) : null}
        </span>
      </div>
    </button>
  )
}

export default TokenButton