import { GlassBanner } from '@/components/GlassBanner/GlassBanner';
import { MobileIcon } from '@/icons';

import { SUBSCRIPTION_PLATFORM_TO_OS_MAP } from '../constants';

export const MobileBillingWarning = ({
  subscriptionPlatform,
}: {
  subscriptionPlatform?: string;
}) => {
  if (!subscriptionPlatform) {
    return null;
  }

  const platformName =
    SUBSCRIPTION_PLATFORM_TO_OS_MAP[subscriptionPlatform] ||
    subscriptionPlatform;

  return (
    <GlassBanner className='bg-yellow-700/50'>
      <div className='flex flex-row flex-wrap items-center justify-between gap-2'>
        <div className='flex flex-row items-center gap-3 font-sans text-base'>
          <MobileIcon width={36} height={36} />
          <div className='flex flex-col gap-1'>
            <span className='leading-none font-bold'>
              You subscribed on {platformName}.
            </span>
            <span>
              To upgrade your plan or change your billing information, please
              use the {platformName} app.
            </span>
          </div>
        </div>
      </div>
    </GlassBanner>
  );
};