import Image from 'next/image';
import Link from 'next/link';

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,
  buttonProps,
}: {
  showLogo?: boolean;
  title?: string;
  titleKey?: string;
  descriptionKey?: 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">{title || <Trans i18nKey={titleKey} />}</h1>
        <p className="text-muted-foreground text-sm">
          <Trans i18nKey={descriptionKey} />
        </p>
      </div>
      {buttonProps && (
        <Button className="mt-8 w-full">
          <Link href={buttonProps.href}>
            <Trans i18nKey={buttonProps.buttonTitleKey} />
          </Link>
        </Button>
      )}
    </div>
  );
};
