import PageHeading from '@/components/common/page-heading';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { router } from '@inertiajs/react';
import {
  ArrowCounterClockwiseIcon,
  CheckCircleIcon,
} from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

const DepositSuccess = () => {
  const { t } = useTranslation();

  return (
    <>
      <PageHeading
        variant="default"
        title={t('Deposit Success')}
        description={t('Your deposit request has been submitted successfully.')}
      />

      <Card>
        <div className="flex flex-col items-center justify-center py-2">
          <CheckCircleIcon weight="duotone" className="mb-4 size-14" />
          <h3 className="text-center text-2xl font-medium">
            {t('Successful')}
          </h3>
        </div>
        <Separator className="my-4 bg-black/5 dark:bg-white/5" />
        <div className="flex items-center justify-center">
          <Button
            type="button"
            variant="secondary"
            onClick={() => router.visit('/deposit')}
            className="min-w-48 rounded-full"
          >
            <ArrowCounterClockwiseIcon weight="bold" />
            <span>{t('Deposit Again')}</span>
          </Button>
        </div>
      </Card>
    </>
  );
};

DepositSuccess.title = 'Deposit Success';

export default DepositSuccess;