import { useMutation } from '@tanstack/react-query';

import { GlassBanner } from '@/components/GlassBanner/GlassBanner';
import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import { WarningIcon } from '@/icons';
import { useApiClient } from '@/lib/apiClient';

export const PastDueWarning = () => {
  const apiClient = useApiClient();

  const getBillingUrl = async (): Promise<{ url: string }> => {
    const { data, error } = await apiClient.POST('/api/billing/create-portal/');
    if (error) {
      throw error;
    }
    return data;
  };

  const mutation = useMutation({
    mutationFn: getBillingUrl,
    onSuccess: (data: { url: string }) => {
      window.location.href = data.url;
    },
  });
  return (
    <GlassBanner className='bg-red-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'>
          <WarningIcon className='size-9' />
          <div className='flex flex-col'>
            <span className='leading-none font-bold'>
              We were unable to process your recent subscription renewal.
            </span>
            <span>
              In order to keep creating, please update your billing information
              and retry payment.
            </span>
          </div>
        </div>
        <Button
          variant={ButtonVariant.Primary}
          shape={ButtonShape.Pill}
          onClick={() => mutation.mutate()}
        >
          Update Billing Details
        </Button>
      </div>
    </GlassBanner>
  );
};