'use client';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import { useModalContext } from '@/context/ModalContext';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { SubscriptionInfo } from '@/state/sessionStore';

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

export const RenewButton = ({ sub }: { sub: SubscriptionInfo }) => {
  const { openModal } = useModalContext();
  const handleRenewClick = () => {
    logWebUserEvent({
      actionName: 'KeepMySubscriptionButtonClicked',
      context: {
        currentUsagePlanId: sub?.plan?.id || '',
        currentPeriod: sub?.period || '',
        subPageVersion: SUBSCRIPTION_PAGE_VERSIONS.aura,
      },
    });
    openModal(ModalTypes.RENEW_SUBSCRIPTION);
  };

  return (
    <>
      <Button
        shape={ButtonShape.Pill}
        variant={ButtonVariant.Secondary}
        size={ButtonSize.Mini}
        onClick={handleRenewClick}
      >
        Renew Subscription
      </Button>
    </>
  );
};