import { Badge, Text } from 'components/common';
import { ProductPrice } from './SubscriptionPlans';

interface CheckoutTotalProps {
  billingCycle: string;
  price: number;
  campaignPrice?: number | null;
  campaignDescription?: string | null;
}

export const CheckoutTotal = ({
  billingCycle,
  price,
  campaignPrice,
  campaignDescription,
}: CheckoutTotalProps) => {
  return (
    <div
      className="padding4 rounded4 spacingY4"
      style={{ border: '1px solid var(--borderColor)' }}
    >
      <div className="flex alignCenter justifyBetween">
        <div className="flex alignCenter spacing2">
          <span className="bold">Total</span>
          <Badge className="fz12" bold uppercase>
            {billingCycle === 'annual' ? 'billed annually' : 'billed monthly'}
          </Badge>
        </div>
        <ProductPrice
          price={billingCycle === 'annual' ? price * 12 : price}
          campaignPrice={
            campaignPrice
              ? billingCycle === 'annual'
                ? campaignPrice * 12
                : campaignPrice
              : undefined
          }
        />
      </div>

      {campaignDescription && <Text size="s">{campaignDescription}</Text>}
    </div>
  );
};