import Image from 'next/image';
import { redirect } from 'next/navigation';

import { MedReportLogo } from '@/components/med-report-logo';

import { Button } from '@kit/ui/button';
import { Trans } from '@kit/ui/trans';

export const SuccessNotification = ({
  showLogo = true,
  title,
  titleKey,
  descriptionKey,
  walletProps,
  buttonProps,
}: {
  showLogo?: boolean;
  title?: string;
  titleKey?: string;
  descriptionKey?: string;
  walletProps?: {
    amount: string;
    expiredAt: string;
  };
  buttonProps?: {
    buttonTitleKey: string;
    href: string;
  };
}) => {
  return (
    <div className="border-border rounded-3xl border px-16 pt-4 pb-12">
      {showLogo && <MedReportLogo />}
      <div className="flex flex-col items-center px-4">
        <Image
          src="/assets/success.png"
          alt="Success"
          className="pt-6 pb-8"
          width={326}
          height={195}
        />
        <h1 className="pb-2 text-center">
          {title || <Trans i18nKey={titleKey} />}
        </h1>
        <p className="text-muted-foreground text-sm">
          <Trans i18nKey={descriptionKey} />
        </p>
      </div>
      {walletProps && (
        <div>
          <Trans i18nKey="common.wallet.balance" />
          <p></p>
          <Trans
            i18nKey="common.wallet.expiredAt"
            values={{ expiredAt: '12.12.2025' }}
          />
        </div>
      )}
      {buttonProps && (
        <Button
          className="mt-8 w-full"
          onClick={() => redirect(buttonProps.href)}
        >
          <Trans i18nKey={buttonProps.buttonTitleKey} />
        </Button>
      )}
    </div>
  );
};