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,
  ClockIcon,
  ListIcon,
} from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

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

  return (
    <>
      <PageHeading
        variant="default"
        title={t('Withdrawal Submitted')}
        description={t('Your withdrawal request has been submitted.')}
      />

      <Card>
        <div className="flex flex-col items-center justify-center py-6">
          <ClockIcon weight="duotone" className="mb-4 size-14" />
          <h3 className="text-center text-2xl font-medium">
            {t('Request Submitted')}
          </h3>
          <p className="mt-2 text-center text-sm text-black/50 dark:text-white/50">
            {t(
              'Your withdrawal is being processed. You can track the status in your transaction history.',
            )}
          </p>
        </div>
        <Separator className="my-4 bg-black/5 dark:bg-white/5" />
        <div className="flex flex-wrap items-center justify-center gap-3">
          <Button
            type="button"
            variant="secondary"
            onClick={() => router.visit('/withdraw')}
            className="min-w-48 rounded-full"
          >
            <ArrowCounterClockwiseIcon weight="bold" />
            <span>{t('Withdraw Again')}</span>
          </Button>
          <Button
            type="button"
            variant="primary"
            onClick={() => router.visit('/transaction-history')}
            className="min-w-48 rounded-full"
          >
            <ListIcon weight="bold" />
            <span>{t('Transaction History')}</span>
          </Button>
        </div>
      </Card>
    </>
  );
};

WithdrawSuccess.title = 'Withdrawal Submitted';

export default WithdrawSuccess;